文章目录
v-bind绑定属性
v-bind用于动态绑定属性
基本语法
v-bind:[属性名]="变量名"
语法糖写法
:[属性名]="变量名"
<body>
<div id="app">
<a v-bind:href="ahref">百度一下</a> /*基本语法*/
<a :href="ahref">百度一下</a> /*语法糖*/
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
ahref:'www.baidu.com'
}
})
</script>
</body>
v-bind动态绑定class
通用样式
以下通用此样式
.active {
color: skyblue;
}
常规语法和语法糖写法
v-bind:[属性名]=“变量名” 或 :[属性名]=“变量名”，变量名的值是类名
<body>
<div id="app">
<h2 :class='isactive'>hello</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
isactive:'active'
}
})
</script>
对象语法动态绑定class
动态绑定class对象语法，就是class后面跟一个对象，以键值对的方式 {类名：布尔值}
- 直接通过{ }绑定一个类，和普通的类可以同时存在，互不冲突
<div id="app">
<h2 :class='{active:true, other:false}'>hello</h2>
<h2 class="first" :class='{active:true, other:false}'>hello</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
})
</script>
2. 通过判断，传入多个值。使用变量动态绑定class
<div id="app">
<h2 :class='{active:isactive, other:isother}'>hello</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
isactive:true,
isother:false,
}
})
</script>
3.过于复杂时使用methods或computed动态绑定class
效果同上，不要忘了小括号
<div id="app">
<h2 :class='getClasses()'>hello</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
isactive:true,
isother:false,
},
methods:{
getClasses:function() {
return {active:this.isactive, other:this.isother}
}
}
})
</script>
- 小案例
点击按钮，改变颜色
<div id="app">
<h2 :class='{active:isactive, other:isother}'>hello</h2> -->
<button @click="reverse" >点我</button>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
isactive:true,
isother:false,
},
methods:{
reverse:function(){
this.isactive = !this.isactive;
}
}
})
</script>
数组语法绑定class
绑定class数组语法，用的较少,因为不是动态决定的
<body>
<div id="app">
//加单引号是字符串
<h2 class="first" :class="['active','isother']">hello</h2>
//不加单引号是变量
<h2 class="first" :class="[c]">hello</h2>
//用方法
<h2 class="first" :class="getClasses()">hello</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
c:"active",
active:'active'
},
methods:{
getClasses:function() {
return [this.c];
}
}
})
</script>
</body>
v-bind动态绑定style
与v-bind动态绑定class类似，详解看注释
对象语法动态绑定style
<body>
<div id="app" v-once>
// {属性名：属性值} ，值可以来自data中的属性
//50加单引号，不加单引号认为是一个变量
//不使用驼峰标识的属性名也要用单引号，即短横线分割的要用单引号
<h2 :style="{'font-size':'50px'}">{{message}}</h2>
<h2 :style="{fontSize:'50px'}">{{message}}</h2>
//使用变量动态绑定
<h2 :style="{fontSize:final}">{{message}}</h2>
<h2 :style="{fontSize:other + 'px'}">{{message}}</h2>
//使用函数动态绑定
<h2 :style="getStyles()">{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message:"hello vue",
final:'50px',
other:50,
},
methods:{
getStyles:function(){
return {fontSize:this.final};
}
}
})
</script>
</body>
数组语法绑定style
<body>
<div id="app" v-once>
//数组语法，可以有多个值，用逗号分开即可
//数组中的每一个值在data中是对象
<h2 :style="[base,size]">{{message}}</h2>
</div>
<script src="../vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data: {
message:'hello vue',
base:{color:'red'},
size:{fontSize:'50px'}
}
})
</script>
</body>
