金山老师的笔记3.属性绑定指令
如果想让html标签中的属性，也能应用Vue中的数据，那么就可以使用vue中常用的属性绑定指令：v-bind
html
<div id="app">
<div v-bind:title="msg">DOM元素属性绑定</div>
<!-- v-bind的简写形式 -->
<div :title="msg">DOM元素属性绑定</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
msg:'Hello World!'
}
});
</script>上面展示的是v-bind的最基本的使用，第一种是完整语法，第二种是缩写方式。
除了将元素的title属性和vue实例的相关字段进行绑定外，还能将其他的属性字段进行绑定，最常见的是对于样式的绑定，即class和style属性。
3.1.绑定样式
使用v-bind指令绑定class属性，就可以动态绑定元素样式了。
html
<head>
<style>
.one{
color: red;
}
.two{
color: blue;
}
</style>
</head>
<body>
<div id="app">
<div :class="className">DOM元素的样式绑定</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
className:'one'
}
});
</script>
</body>2.2.使用对象语法绑定样式
我们可以给v-bind:class 一个对象，也可以直接绑定数据里的一个对象，以动态地切换class。
html
<head>
<style>
.one{
color: red;
}
.two{
font-size: 48px;
}
</style>
</head>
<body>
<div id="app">
<div :class="{one:oneActive,two:twoActive}">DOM元素的样式绑定</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
oneActive:true,
twoActive:false
}
});
</script>
</body>2.3.使用三目运算绑定样式
可以使用三目运算符，来动态绑定样式。
html
<head>
<style>
.one{
color: red;
}
</style>
</head>
<body>
<div id="app">
<div :class="userId==1?className:''">DOM元素的样式绑定</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data: {
userId:1,
className:'one'
}
});
</script>
</body>2.4.直接绑定内联样式
也可以直接绑定内联样式。
html
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="app">
<div style="color:red;font-size: 50px;">DOM元素的样式绑定</div>
<div :style="{color:colorValue,fontSize:fontSizeValue}">DOM元素的样式绑定</div>
<div :style="stylelist">DOM元素的样式绑定</div>
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
colorValue: 'green',
fontSizeValue: '60px',
stylelist: 'color:red'
}
});
</script>注意：绑定style属性后，样式的书写要遵循javaScript规范。 也就是将 xxx-xxx 改写成驼峰命名方式 xxxXxxx
