Vue.js里,绑定class用一个计算属性是什么意思?

http://cn.vuejs.org/guide/class-and-style.html

你也可以直接绑定数据里的一个对象:

<div v-bind:class="classObject"></div>
data: {
  classObject: {
    'class-a': true,
    'class-b': false
  }
}

我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式。

怎样在这里使用计算属性,能否举例说明?

阅读 7.9k
3 个回答

可能是这个意思

computed:{
   classObject: function(){
        return  true ?  {
                'class-a': true,
                'class-b': false
              }:  {
                'class-a': false,
                'class-b': false
              };
   }
}

就是如果 classObject = {'class-a': true, 'class-b': false} 则最后渲染结果为 <div class="class-a"></div>,如果两个都为 true 则为 <div class="class-a class-b"></div>

就是说class里面那个对象,可以通过key是classname,值是true or false的形式,很灵活的控制该元素上的class。返回的意思是你通过计算返回一个这种对象,key可以算,value也可以算,拼出来一个。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题