VueJs：使用v-class

Question

我试图将一个css类分配给span元素，当它按下EDIT按钮时。

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

http://jsfiddle.net/r3nepL7u/

但它只能起作用，因为我检查编辑对象的title属性是否等于todo对象的title属性，而不是检查两个对象是否相等。

不幸的是，每当我拥有相同的属性（例如标题）但是不同的对象时，这就会破坏我的代码。

<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/

如何检查待办事项是否与 editedTodo 相同。有更好的方法，使用v-class指令，而不是使用内联表达式，这意味着更复杂的计算？

在这里的todomvc示例中似乎工作得很好：

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

Answer 1

向View Model添加一个进行深度比较的方法。例如，创建一个名为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

@Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_account_view,container,false); accountButton = (Button) view.findViewById(R.id.button); accountButton.setOnClickListener(myAction); return view; }

中的条件类名称

以下是基于documentation

的方法

第一路

作为布尔变量

您在Vue.js文件中定义boolean变量，并根据该变量设置类

js档案

js

data: { isActive: true, hasError: false } 档案

html

作为对象

您还可以使用类名定义对象 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> 档案

js

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

html

第二路

您可以定义班级的名称＆＃34; <div v-bind:class="classObject"></div> 文件中的变量，并根据js设置类

nameOfTheClass档案

js

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

html

第三路

您可以在<div v-bind:class="nameOfTheClass"></div> 中设置课程的名称，然后使用js文件中的if语句进行评估

html档案     数据：{       nameOfTheClass：＆＃39;这是这个名字的班级＆＃39;     }

js档案

html