Vue.js基礎學習(三) -------------動態繫結v-bind的介紹和使用
阿新 • • 發佈:2021-01-01
Vue.js基礎學習(三) -------------動態繫結v-bind的介紹和使用
一、v-bind介紹
v-bind:需要動態決定標籤的屬性的時候 可以使用到v-bind
語法糖的寫法: : ,把v-bind替換為 :
二、v-bind的基本使用
動態繫結a標籤的href屬性,動態繫結img的src屬性
<img :src='imgURL' >
<a :href="aHref">百度一下</a>
aHref:'http://www.baidu.com',
imgURL: '/img/=.jpg'
三、v-bind動態繫結class
<style>
.Color{
color:green;
}
.acl{
color:red;
}
</style>
</head>
<body>
<div id="app">
<!--<h2 :class="{類名1:Boolean,類名2:Booolean}">{{message}}</h2>-->
<h2 :class ="{ Color:isColor, Line:isLine}">{{message}}</h2> <!--物件語法-->
<h2 :class="getcolores()">{{message}}</h2>
<button @click='color'>更換</button>
</div>
<script src="/vue.js"></script>
<script>
const app = new Vue({
el:'#app',
data:{
message:'動態繫結class',
isColor:true,
isLine:true
},
methods: {
color:function(){
this.isColor =! this.isColor;
},
getcolores:function(){
return{Color: this.isColor}
}
}
})
</script>
</body>
在繫結class的時候在類後面賦值一個Boolean值,這樣可以決定它是否顯示這個class屬性
四、v-bind動態繫結style
body>
<div id="app">
<h3 :style="{fontSize:fonzise,color:Fcolor}">{{message}}</h3>
<h3 :style="[fz,Fcolor]" >{{message}}</h3>
</div>
<script src="/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:'動態繫結style',
fonzise:'100px',
Fcolor:'red',
},
})
</script>
</body>
在v-bind裡繫結一個元素的style屬性的時候,給style賦值一個物件,物件的名字是屬性名,值是在vue例項的data裡定義的,以方便動態的改變它的值