小编HJe*_*rem的帖子

我有一个显示项目的网页.对于每个项目,都有一个按钮(vuejs组件),允许用户将此项目切换(添加/删除)到他的集合.

这是组件:

<template lang="html">
        <button type="button" @click="toggle" name="button" class="btn" :class="{'btn-danger': dAdded, 'btn-primary': !dAdded}">{{ dText }}</button>
    </template>

<script>
export default {
    props: {
        added: Boolean,
        text: String,
        id: Number,
    },
    data() {
        return {
            dAdded: this.added,
            dText: this.text,
            dId: this.id
        }
    },
    watch: {
        added: function(newVal, oldVal) { // watch it
            this.dAdded = this.added
        },
        text: function(newVal, oldVal) { // watch it
            this.dText = this.text
        },
        id: function(newVal, oldVal) { // watch it
            this.dId = this.id
        }
    },
    methods: {
        toggle: …

这是我的表……我应该添加什么来突出显示所选行？所以更清楚地看到我的鼠标在哪里...................................... ………………

<style type ="text/css">
      table.imagetable {
          font-family: verdana,arial,sans-serif;
          font-size:15px;
          color:#333333;
          border-width: 1px;
          border-color: #999999;
          border-collapse: collapse;
          width:100%;
      }
      table.imagetable th {
          background:#b5cfd2 url('/static/cell-blue.jpg');
          border-width: 1px;
          padding: 12px;
          border-style: solid;
          border-color: #999999;
      }
      table.imagetable td {
          background:#dcddc0 url('/static/cell-grey.jpg');
          border-width: 1px;
          padding: 8px;
          border-style: solid;
          border-color: #999999;
      }
    </style>

    <table class="imagetable">
      <tr>
        <th>Time</th><th>Category</th><th>Filename</th>
      </tr>
        {% for (t,f,c,l, t2) in data %}
          <tr>
              <td style = "padding:3px;">{{date}} {{t2}}</td>
              <td sytle = "padding:3px;"><a href = "/report_category/{{c}}/">{{c}}</a></td>
              <!-- l is the relative location, we …