Vue从零开始总结5

很多时候我们不能把展示的内容写死，否则后期更新维护会相当麻烦，所以这时就需要用v-bind来进行动态绑定，如：v-bind:src或者v-bind:href，官方呢，也给出了语法糖，用于简写,就一个：就可以了,如:src或者:href，这样做就可以从服务器里面动态获取地址了

v-bind：还可以动态绑定class属性，如：v-bind:class="{className:flag}",注意一定要加{}

这里的{}里面是对象，className后面:代表的boolean值，如果flag为真那么就执行

有时候我们可以通过改变flag的值来决定是否采用这个样式

如:v-on:click="change"写在某个标签上,紧接着在data里面定义flag:true，然后在model里面中的methods中定义function :change(){this.flag=!this.flag}

当我们绑定了多个class时，会造成数据的冗余，查看起来很不方便，这时我们就可以把对象写进函数里面，如：classAll:function(){return {className:this.flag};},然后在class="classAll()".注意this得加

动态绑定class除了对象方法外还有数组方法，如：class="[one,two]",然后在data里面添加one:'类名1',two:'类名2'，同样的也可以写到methods里面，classAll:function(){return [this.one,this.two];},同样的也可以建立标志位,如：

<p :class="[{one:flag},{two:flag}]">awslm</p>

classAllOther:function (){
   return [{one:this.flag},{two:this.flag}];
}

在这里不建议在data里面换class名，如：one:'ones',two:'twos'，这样改很难加判断标识flag