文章目錄
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>
