Vue基礎語法02
- 屬性綁定 v-bind:(可簡寫爲“:”)
v-bind 指令被用來響應地更新 HTML 屬性
v-bind:href 可以縮寫爲 :href
v-bind 和 v-on的區別:
v-bind 綁定屬性
v-on 綁定事件
<div class="app">
<input type="text" v-bind:value="msg">
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
}
});
</script>
- 綁定類名v-bind:class
通過v-bind:class = { 鍵: 值 }
鍵 代表一個類名 如果這個值 爲true 表示 顯示這個類名
如果這個值 爲false 表示 不顯示這個類名
<style>
.in {
background-color: pink;
}
</style>
<div class="app">
<input type="text" v-bind:value="msg" :class={in:inFlag}>
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:true,
}
});
</script>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:false,
}
});
</script>
通過v-bind:class =[ 值1,值2 ]
值1、值2 對應 data 中的 數據
.in {
background-color: pink;
}
.border {
border: 5px solid purple;
}
</style>
<div class="app">
<input type="text" v-bind:value="msg" :class=[inClass,borderClass]>
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:false,
inClass:'in',
borderClass:'border'
}
});
</script>
對象綁定和數組綁定可以混用嗎?
數組中可以存儲任何數據類型
對象的值中也可以存儲任何數據類型
綁定數組和綁定對象有什麼區別
綁定對象的時候對象的屬性 即要渲染的類名 對象的屬性值對應的是 data 中的數據
綁定數組的時候數組裏面存的值 是data 中的數據
類名是可以疊加的,之前存在class 可以通過v-bind:class繼續控制其他類名,在頁面中是以多類名方式展現
.in {
background-color: pink;
}
.border {
border: 5px solid purple;
}
.h {
height: 50px;
width: 100px;
}
</style>
<div class="app">
<input type="text" v-bind:value="msg" :class=[inClass,borderClass] class="h">
</div>
<script>
var vm=new Vue({
el:'.app',
data:{
msg:123,
inFlag:false,
inClass:'in',
borderClass:'border'
}
});
</script>
樣式綁定之style綁定用法
綁定style 可以使用數組和 對象
v-bind:style = [值1, 值2 ]
數組中的值1 和值2 中存儲的是一個對象 這個對象裏面存儲的 css屬性和 屬性值
<div class="app">
<input type="text" :style=[style1,style2]>
</div>
<script>
var vm=new Vue({
el:".app",
data:{
style1:{
backgroundColor:'pink',
},
style2:{
border:'5px solid purple',
}
}
});
</script>
v-bind:style = { 鍵: 值 }
鍵 代表 CSS的屬性 值 中 存貯的是 CSS 屬性值
<div class="app">
<input type="text" :style={backgroundColor:red,border:border}>
</div>
<script>
var vm=new Vue({
el:".app",
data:{
red:'red',
border:'5px solid pink'
}
});
</script>