+|Vue指令 - v-bind(:)
v-bind定义 操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
HTML Css属性可以使用v-bind指定绑定数据，以便在不同的情况下产生不同的效果(动态绑定)。
简单的应用
HTML:
示例文字
示例文字
示例文字
var vm = new Vue({
el:'#app',
data:{
ti:'title提示!',
bg:'background:red',
cs:'reset',
ph:'示例文字',
},
})
文章图片
注意：省略v-bind改为使用 " : " 为简写方式，效果相同。如：:title。
对象语法 【+|Vue指令 - v-bind(:)】Vue允许传给属性一个对象，实现动态绑定。
例子：传入对象，动态应用class类。
HTML：
默认应用了reset类
var vm = new Vue({
el:'#app',
data:{
reset:true,
},
methods:{
clos(){
this.reset = false;
};
},
})
// reset类的应用与否，与data对象中的reset属性值(true/false)有关。
文章图片
文章图片
可以看到，当点击按钮时，不再应用class类，实现了简单的动态绑定。
Vue允许传入更多属性来动态切换多个class，并且可以与普通class共存 ？
HTML：
默认应用了reset类
var vm = new Vue({
el:'#app',
data:{
reset:true,
head:true,
foot:false//不应用
},
})
// foot类的应用与否，与data对象中的foot属性值(true/false)有关。
文章图片
可以看到，public(普通)、reset、head都应用到了class上，至于foot为什么没有应用，这要取决于foot属性的值：truthiness。
数组语法 Vue允许传给属性一个数组对象，实现应用一个class列表。
例子：传入数组，给元素添加一组class。
HTML:
示例文字
var vm = new Vue({
el:'#app',
data:{
resetClass:'reset',
headClass:'head',
footClass:'foot',
},
})
文章图片
可以看到，一组class成功被应用到了元素上，非常适合添加一组(很多)类。
如果想根据条件切换列表中的class，Vue也提供了两种方式 ？
（1）三元表达式
这个方法可以使调用或渲染数据时逐级筛选。也可以在某种情景下提高代码效率，但只适合简单的逻辑判断场景，不适合复杂的逻辑判断。
// 这里沿用数组语法的代码
示例文字
如果resetClass始终为false，则一直应用footClass，还有，一旦条件过多时这样写难免有些繁琐。
（2）嵌套对象
在数组中嵌套对象，Vue允许我们这么做，也弥补了三元表达式条件过多繁琐的问题。
HTML：
示例文字
var vm = new Vue({
el:'#app',
data:{
resetClass:false,
headClass:'head',
footClass:'foot',
},
})
在对象中，添加方法让其完成复杂的逻辑完成更灵活地添加也是一个好法子。
推荐阅读
- vue-cli|vue-cli 3.x vue.config.js 配置
- 2020-04-07vue中Axios的封装和API接口的管理
- VueX--VUE核心插件
- 动态组件与v-once指令
- vue组件中为何data必须是一个函数（）
- 用npm发布一个包的教程并编写一个vue的插件发布
- vuex|vuex 基础结构
- Vue源码分析—响应式原理(二)
- VueX（Vuex|VueX（Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式)
- vue中的条件判断详解v-if|vue中的条件判断详解v-if v-else v-else-if v-show