一，v-bind介绍
二，v-bind实践
<body>
<div id="app">
<!-- 错误做法 -->
<!-- <img src="{{imgURL}}" alt=""> -->
<img v-bind:src="imgURL" alt="">
<a v-bind:href="aHref">百度一下</a>
<!-- 语法糖的写法 -->
<img :src="imgURL" alt="">
<a :href="aHref">百度一下</a>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
imgURL: '此处为图片url',
aHref: 'https://www.baidu.com/?tn=44048691_1_oem_dg'
}
})
</script>
</body>
三，v-bind动态绑定class
1.对象语法
css：
.active {
color: red;
}html：
<body>
<div id="app">
<h2 :class="{active:isActive}">{{message}}</h2>
<!-- 将class的类名封装成函数的写法 -->
<h2 :class="getClass()">{{message}}</h2>
<button v-on:click="btnClick">点击变色</button>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '哈喽',
isActive: true
},
methods: {
btnClick: function() {
this.isActive = !this.isActive
},
// 如果class较多，也可以封装成一个函数，如下
getClass: function() {
return {
active: this.isActive
}
}
}
})
</script>
</body>
2.数组语法
css：
.active {
color: red;
}html：
<body>
<div id="app">
<h2 :class="[userClass]">{{message}}</h2>
<!-- 将class的类名封装成函数的写法 -->
<h2 :class="getClass()">{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '哈喽',
userClass: 'active'
},
methods: {
// 如果class较多，也可以封装成一个函数，如下
getClass: function() {
return [this.userClass]
}
}
})
</script>
</body>
四，v-bind动态绑定style
1.对象语法
<body>
<div id="app">
<!-- <h2 :style="{属性名:属性值}">{{message}}</h2> -->
<!-- 属性值采用驼峰命名法 -->
<h2 :style="{fontSize:finalSize+'px',backgroundColor:color}">{{message}}</h2>
<!-- 属性值用基本格式，但需要加'' -->
<h2 :style="{'font-size':finalSize+'px','background-color':color}">{{message}}</h2>
<!-- 将style封装成函数的写法 -->
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '哈喽',
finalSize: 100,
color: 'red',
},
methods: {
// 如果style较多，也可以封装成一个函数，如下
getStyle: function() {
return {
fontSize: this.finalSize + 'px',
backgroundColor: this.color,
// 属性值基本命名格式，加''
// 'font-size': this.finalSize + 'px',
// 'background-color': this.color
}
}
}
})
</script>
</body>
2.数组语法
<body>
<div id="app">
<!-- 数组写法 -->
<h2 :style="[fs,bgc]">{{message}}</h2>
<!-- 将style封装成函数的写法 -->
<h2 :style="getStyle()">{{message}}</h2>
</div>
<script src="./js/vue.js"></script>
<script type="text/javascript">
new Vue({
el: '#app',
data: {
message: '哈喽',
fs: {
fontSize: '200px'
},
bgc: {
backgroundColor: 'red'
},
},
methods: {
// 如果style较多，也可以封装成一个函数，如下
getStyle: function() {
return [this.fs, this.bgc]
}
}
})
</script>
</body>
