目录：
基础语法上篇学习了Vue渲染数据的三种方式，这一节我们将对这三种方式深入学习！
属性绑定
何为属性？
属性指的是Html元素的属性，例如a标签的title就是一个属性！
Vue如何绑定属性？
Vue绑定属性一般是通过v-bind指令来执行，指令不同于{
{ message }}双大括号的模板语法，它只能渲染Html内容，不能渲染Html标签的属性，这就是v-bind指令存在的意义！
- 语法：
v-bind:class="classProperty"
// 简写
:class="classProperty"
当使用v-bind指令绑定html元素的属性后，属性（class）就相当于参数，classProperty为预期值，一般在实际应用中，v-bind绑定的属性值都是通过计算得来 或者 是一个通过判断时刻变化的值！
- 例子：
<div id="app">
<p :title="testTitle1Key + ' - ' + testTitle1Key">testTitle</p>
<p :title="testTitle3Key - testTitle4Key">testTitle2</p>
<p :title="testObj">testObj</p>
<p :title="testArr">testArr</p>
<p :title="testMethod()">testMethod</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
testTitle1Key: 'testTitle1Value',
testTitle2Key: 'testTitle2Value',
testTitle3Key: 3,
testTitle4Key: 2,
testObj: {
name: 'testObj'
},
testArr: ['1', '2', '3'],
testMethod: function () {
var result = 1 + 1;
return '1 + 1 = ' + result;
}
}
});
</script>
以上从testTitle1到testTitle4，声明了4个参数：
- 1 和 2为两个字符串类型,渲染出字符串！
- 3 和 4为数字类型，渲染出数字！
- testObj 为一个 Object对象，渲染出toString()方法的返回值！
- testArr 为一个 Array(数组)，渲染出toString()方法的返回值！
- testMethod 为一个方法，渲染出方法的返回值！
然后分别通过v-bind指令绑定到了P标签的title属性，进行渲染！
- 执行结果如下：
<div id="app">
<p title="testTitle1Value - testTitle1Value">testTitle</p>
<p title="1">testTitle2</p>
<p title="[object Object]">testObj</p>
<p title="1,2,3">testArr</p>
<p title="1 + 1 = 2">testMethod</p>
</div>
注意观察以上绑定的testObj对象打印出来的为[object Object]，此时就有些懵逼了，貌似打印出来的是Object对象的toString()方法打印的值！
- 验证一下, 新增以下代码：
var testObj = {
name: 'testObj'
};
testObj.toString = function () {
return 'name: ' + testObj.name;
}
var app = new Vue({
el: '#app',
data: {
...
testObj: testObj,
...
}
});
如上面所示，重写了 testObj 的 toString 方法，再来看一下页面的结果：
可以发现，绑定 title属性已经被修改为 toString 方法的 return 值了。
testArr与之类似也是打印的toString()方法的返回值！
由此可以看出
v-bind是支持单一JavaScript表达式的，并且支持直接绑定Object对象和方法。如果绑定为 Object 对象的话，那么会绑定对象的 toString() 方法的返回值。如果绑定为方法的话，那么会绑定方法的返回值。
Class 与 Style 绑定
v-bind在绑定class和style内联样式属性时，除了支持字符串之外，还可以直接使用对象或数组。
这是因为，操作元素的 class 列表和内联样式是数据绑定是一个常见需求。所以，Vue.js对这一块 做了专门的增强。
绑定Class属性
- 直接传入对象的语法
<div v-bind:class="{ active: isActive }"></div>
例子：
<div id="app">
<p class="test" v-bind:class="{
'red': isActive}">test</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
isActive: true
}
})
</script>
通过在控制台 app.isActive的值来控制显示！
- 直接放入key-vlaue形式的对象
- 直接复用以上的例子，新添加数据：
<p class="test" v-bind:class="testClassObject">test</p>
<script>
var app = new Vue({
el: '#app',
data: {
...
testClassObject: {
blue: true,
'big-font': true
},
}
})
</script>
- 支持拼接数组
<!-- 支持拼接数组 -->
<p class="test" :class="[classBlue, bigFont]">test3</p>
<script>
var app = new Vue({
el: '#app',
data: {
...
bigFont: 'big-font',
classBlue: 'blue',
}
})
</script>
4. 支持使用正则表达式
<!-- 支持使用正则表达式 -->
<p class="test" :class="[isBlue ? classBlue : classYellow]">test4</p>
<script>
var app = new Vue({
el: '#app',
data: {
...
classBlue: 'blue',
isBlue: false,
classYellow: 'yellow',
}
})
</script>
- 支持在数组中嵌套对象
<!-- 支持在数组中嵌套对象 -->
<p class="test" :class="[{classBlue : isBlue}, testClassObject]">test5</p>
<script>
var app = new Vue({
el: '#app',
data: {
...
classBlue: 'blue',
isBlue: false,
classYellow: 'yellow',
}
})
</script>
绑定内联style属性
- 使用v-bind绑定style同样支持正则表达式的形式，在格式上可以不使用中括号
[]。
<p style="font-weight: bold" :style="isActive ? 'color: red' : 'color: blue'">test6</p>
例子解析： 如果isActive的值为true，p元素的color为red，否则color为blue。
- 支持对象形式和字符串拼接
- 不使用单引号的话需要使用驼峰标示的形式
- 使用单引号需要使用短横线分隔的形式
<p style="font-weight: bold" :style="{
color: styleRedColor, fontSize: styleFontSize + 'px', 'font-weight': styleFontLighter}">test7</p>
<script>
var app = new Vue({
el: '#app',
data: {
...
styleRedColor: 'red',
styleFontSize: 18,
styleFontLighter: 'lighter',
}
})
</script>
- 支持直接放入对象,并且Vue支持自动添加css前缀
如：-webkit-、-moz-等
<p style="font-weight: bold" :style="testStyle">test8</p>
<script>
var app = new Vue({
el: '#app',
data: {
...
testStyle: {
color: 'red',
fontSize: '18px',
'font-weight': 'lighter',
display: ['-webkit-box', '-ms-flexbox', 'flex']
}
})
</script>
当css的属性提供包含多个值的数组时，Vue只会渲染数组中最后一个被浏览器支持的值,如例子中的 display: ['-webkit-box', '-ms-flexbox', 'flex']， 谷歌浏览器只渲染了flex。
通过这些例子，加上不断的练习，即可理解和掌握绑定属性的操作，学到这里已经可以充分感受到vue的强大威力了！
感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"。码云上有我们开源的商城项目，知识付费项目，JAVA版全开源商城系统，学习研究欢迎使用，老铁顺手点个star呗，老板奖励五毛，分你两毛五，😂😂关注我们保持联系！
转载：https://blog.csdn.net/CRMEB/article/details/111293942