1、v-bind的基本使用
作用:动态的绑定元素的属性
<div id="app">
<!-- 这里不可以使用 mustache 语法
v-bind 有一个语法糖==》 可以直接简写为 :
-->
<img v-bind:src="imageUrl" alt="博客园背景">
<a v-bind:href="url" target="_blank">百度一下</a>
<!--语法糖写法-->
<img :src="imageUrl" alt="博客园背景">
<a :href="url" target="_blank" style="color: blue">百度一下</a>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
message: 'hello',
url: 'http://www.baidu.com',
imageUrl: 'https://images.cnblogs.com/cnblogs_com/
houchen/1801587/o_210120143517jayzhou.jpeg'
}
})
</script>
2、v-bind 动态绑定class
1) 对象语法
v-bind:class="{类名1:boolean,类名2:boolean}"
<style>
.active{
color: red;
}
.line{
text-decoration: underline;
}
</style>
<div id="app">
<!--<h2 v-bind:class="{类名1:boolean,类名2:boolean}">{{message}}</h2>
当类名1 后面的布尔值为true时,class="类名1"
-->
<h2 v-bind:class="{active:isActive,line:isLine}">{{message}}</h2>
<button v-on:click="changeToBlack">变黑</button>
</div>
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
message: 'hello',
isActive: true,
isLine: true
},
methods: {
changeToBlack: function () {
this.isActive = !this.isActive
}
}
})
2)数组语法
<div id="app">
<h2 v-bind:class="[active,line]">{{message}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
message: 'hello',
active: 'active',
line: 'line'
}
})
</script>
3、v-bind 动态绑定style
1)对象语法
:style="{css属性名:css属性值,css属性名:css属性值}"
<div id="app">
<!--<h2 :style="{css属性名:css属性值,css属性名:css属性值}"></h2>-->
<!-- 注意:red要加单引号,否则会被解析成变量 -->
<h2 :style="{fontSize:fontSize,color:'red'}">{{message}}</h2>
</div>
2)数组语法
<div id="app">
<!--<h2 :style="{css属性名:css属性值,css属性名:css属性值}"></h2>-->
<!--<h2 :style="[baseStyle1]">{{message}}</h2>-->
<h2 :style="[colorStyle,sizeStyle]">{{message}}</h2>
</div>
const app = new Vue({
el: "#app", //用于挂载要管理的元素
data: { //定义数据
message: 'hello',
fontSize: "35px",
baseStyle1: {fontSize:this.fontSize,color:'red'},
colorStyle: {color:'blue'},
sizeStyle: {fontSize:this.fontSize}
}
})