哈喽，接下来我将会持续的更新博客，本次主要通过学习uniapp中的uView框架来学习Vue,我在这里做下一些笔记，如果对读者们有帮助的话都可以点赞或者有不足之处希望大佬们能指出，感谢大家。

一、如果没有动态绑定，那么Vue中的Css就莫得玩了

【1.丢出一段代码】

:class="!headerFlag?'header-title':'header-title-small'"

【2.再丢出一段代码】

:class="[{'header-title':headerFlag,'header-color-red':headerFlag}]"

【3.继续在丢段代码】

:class="[{'header-title':headerFlag},{'header-color-red':headerFlag}]"

在Vue的开发中想必动态绑定的出场率还是相当的高。

1. 在第一段代码中是通过一个headerFlag标志对两个样式来进行选择性加载。
2. 在第二段和第三段代码中都是通过一个headerFlag标志对一个样式来进行选择性加载。

那么问题来了！第二段代码中是一个对象多个属性，第三段代码中是数组传递多个对象。这两个写法区别在哪里？一个 {} 能解决的为什么要用两个 {} 呢？当然存在既有存在的道理 ，就好比地不长无用之草，天不生无用之人，第三段代码的写法可以配合 computed 属性来使用。

// ....头部代码省略
<view :class="[{'header-title':headerFlag},textStyle(index)]" v-for="(item,index) in 5" :key="index">
		
</view>
// ....中间代码省略
computed: {
	textStyle() {
		return index=>{
			console.log(index);
			let style = {};
			if(index == 1){
				style.color = '#21ebff';
			}else{
				style.color = '#ffffff';
			}
			style.background = '#21ebff'
			return style;
		}
	}
},
// ....底部代码省略

以上就是我对Vue动态绑定的理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的文章,以避免误人子弟。