这篇文章给大家介绍的文章内容是关于对4-v-bind指令的分析（附代码），有很好的参考价值，希望可以帮助到有需要的朋友。
1. 定义
1.1 v-bind 指令被用来响应地更新 HTML 属性，其实它是支持一个单一 JavaScript 表达式 （v-for 除外）。
2. 语法
2.1 完整语法： >，解释：v-bind 是指令，: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。
2.2 缩写语法： >，解释：: 后面的 class 是参数，classProperty 则在官方文档中被称为“预期值”。
3. 用法
3.1 绑定一个属性
全写代码示例：
{{title}}
{{text}}
简写代码示例：
{{title}}
{{text}}
3.2 内联字符串拼接代码示例
{{title}}
{{text}}
3.3 class绑定
3.3.1 对象语法
span标签绑定一个对象
方法一直接在template中声明对象，对象中声明属性prop1和prop2，在javascrip输出声明属性是否可用，如果声明属性value值设置为true，则声明属性值可用，如果声明属性value值设置为false，则声明属性值不可用，代码如下所示：
{{title}}
{{text}}
方法二直接在template中声明对象名，在javascrip中声明属性prop1和prop2并输出是否可用，如果声明属性value值设置为true，则声明属性值可用，如果声明属性value值设置为false，则声明属性值不可用，代码如下所示：
{{title}}
{{text}}
3.3.2 数组语法
方法一直接在template中声明数组名，在javascript中输出需要的数组元素，示例代码如下：
{{title}}
{{text}}
方法二在template中声明数组并定义其元素，在javascript中输出数组定义元素是否可用，如果需要使用此数组元素，则在javascript中定义要输出对应数组元素的属性值，如果不需要使用此数组元素，则设置此数组元素的属性值为false，示例代码如下：
{{title}}
{{text}}
方法三根据条件切换列表中的 绑定的class，在template声明数组和条件表达式，在javascript中输出数组元素的条件表达式的值，示例代码如下：
{{title}}
{{text}}
3.4 绑定内联样式
3.4.1 对象语法，在template中声明属性，在javascript输出对应的属性值，示例代码如下：
{{title}}
{{text}}
3.4.2 数组语法，可以将多个样式对象应用到同一个元素上
{{title}}
{{text}}
3.4.3 当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。
{{title}}
{{text}}
3.4.4 多重值绑定，从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex
{{title}}
{{text}}
总结：v-bind动态地绑定一个或多个特性，或一个组件 prop 到表达式，可以很方便的渲染DOM
相关推荐：
