VueJs：使用 v-class

Question

我正在尝试将 css class 分配给跨度元素，只要它按下“编辑”按钮。

这是我在 jsfiddle 中的工作示例：

但它只有效，因为我检查编辑的 object 的标题属性是否等于待办事项 object 的标题属性，而不是我而是检查两个 object 是否相等。

不幸的是，每当我有相同的属性（例如标题）但不同的 objects.

时，这会破坏我的代码

<td> 
    <span v-class="
        completed: todo.completed, 
        editing: editedTodo.title == todo.title">
        {{ todo.title }}
    </span>
</td>

相反，我想做这样的事情，我检查 todo == editedTodo

<span v-class="
    completed: todo.completed, 
    editing: editedTodo == todo">
    {{ todo.title }}
</span>

非工作 Jsfiddle： http://jsfiddle.net/r3nepL7u/1/

如何检查 todo 是否等于 editedTodo。 AND 是否有更好的方法，使用 v-class 指令，而不是使用内联表达式，这意味着更复杂的计算？

它似乎在此处的 todomvc 示例中工作正常：

第 23 行：https://github.com/yyx990803/vue/blob/dev/examples/todomvc/index.html

Answer 1

向您的视图模型添加一个进行深度比较的方法。例如，创建一个名为 todoIsEqual 的方法，然后让它使用 LoDash 进行比较：

[...]
methods: {
    todoIsEqual: function (todo_a, todo_b) {
        return _.isEqual(todo_a, todo_b);
    }
[...]

并像这样使用它：

<span v-class="
    completed: todo.completed, 
    editing: todoIsEqual(editedTodo, todo)">
    {{ todo.title }}
</span>

Answer 2

实际上它不起作用的原因很简单：

我错误地只分配了两个属性并做了一个 if 语句来查看这两个对象是否相等。我这样做了：

editTask: function (that) {
    this.editedTodo = {
        body: that.todo.body,
        completed: that.todo.completed
    };
},

而不是像这样将实际对象分配给 editedTodo：

editTask: function (that) {
    this.editedTodo = that.todo;
},

问题已解决。

Answer 3

`Vue.js`

中的条件 class 名称

根据 documentation

，您可以按照以下方式进行操作

第一种方式

作为布尔变量

您在 js 文件中定义了一个 boolean 变量，并基于该变量设置 class

js 文件

data: {
  isActive: true,
  hasError: false
}

html 文件

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

作为对象

您还可以使用 class 名称定义对象 js 文件

data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

html 文件

<div v-bind:class="classObject"></div>

第二种方式

您在 js 文件中定义 "name of the class" 变量，并根据 nameOfTheClass 设置 class

js 文件

data: {
  nameOfTheClass: 'this-is-the-name-of-the-class'
}

html 文件

<div v-bind:class="nameOfTheClass"></div>

第三种方式

您可以在 js 中设置 class 的名称，然后在 html 文件

中使用 if 语句进行评估

js 文件数据： { 类名：'this-is-the-name-of-class' }

html 文件

<div v-bind:class="{ active: nameOfTheClass === 'this-is-the-name-of-class'}">

VueJs：使用 v-class

VueJs: Working with v-class

html

javascript

laravel

vue.js

`Vue.js`

第一种方式

作为布尔变量

作为对象

第二种方式

第三种方式