绑定class和style属性

1.绑定class和style属性

方式一:把class和style作为普通字符串进行绑定

方式二:把class和style绑定为对象

模型数据是一个对象,对象中包含每个class名字,每个class对应一个bool

值控制是否应用该class

<span :class="unameClassObject">

            unameClassObject:{   

                           label:true,

                          'label-danger':false

                          'label-success':true

                  }

</span>

强调:如果class名或css属性名中间有-,则必须用" "包裹起来

模型数据是一个对象,对象中包含每个css属性的名值对儿

<span :style="unameStyleObject"></span>

unameStyleObject:{ 

                    color:'red',

                   'font-size':'2em'

   }

其实,style中,还可以直接绑定一个对象语法 :style={ 'css属性' : 值,‘css属性":值...}

2.计算属性

什么是:不实际存储属性值,而是根据其他数据属性的值,动态计算获得。

为什么:有些属性值,不能直接获得,需要经过其他属性的值的计算后,才能获得

              但是,js面向对象规定:不能在一个属性中,使用另外一个属性。

何时:今后,只要一个属性的值,依赖于其他数据属性的值,就要用计算属性。

其实:也可以通过定义Vue对象的方法,然后绑定方法,获得返回值实现。

如何实现计算属性:

①new Vue({   

           el:"xxx",

           data:{ ... },

           methods:{ ... },

           watch:{ ... },

           computed:{

                新属性名(){

                        return   用现有数据属性执行计算

               }

         }

})

②绑定时:和普通数据属性一样!{{ 计算属性 }}

③不加()!像一个没有set,只有get的访问器属性。虽然是方法,但是用法同普通

属性完全一样。

原文地址:https://www.cnblogs.com/sna-ling/p/13173850.html