怎么理解Vue的v-bind屬性

這篇文章主要講解了“怎么理解Vue的v-bind屬性”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“怎么理解Vue的v-bind屬性”吧！

首先，來(lái)學(xué)習(xí)下常用的v-bind屬性，它的作用是在屬性中使用vue中定義的變量的值。

<div id="div1">

<a v-bind:href="href">百度一下</a><br />

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁(yè)面需要的vue數(shù)據(jù)

href: "https://www.baidu.com"

}

});

</script>

恩，很簡(jiǎn)單嘛，那么如果需要顯示文本和變量一起怎么辦呢？

<div id="div1">

<a v-bind:href="'check.do?id='+id">查看</a>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁(yè)面需要的vue數(shù)據(jù)

id: 3

}

});

</script>

原來(lái)如此，需要拼接字符串啊，好像v-bind:可以簡(jiǎn)寫為:，我在下個(gè)例子中試試。

接下來(lái)我試試樣式的綁定。

<div id="div1">

<img v-show="checked" :class="{img1:showStyle}" src="img/3.jpg" /><br />

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁(yè)面需要的vue數(shù)據(jù)

showStyle: false

}

});

</script>

不錯(cuò)，真的可以簡(jiǎn)寫，而且樣式的綁定好像跟其他的有點(diǎn)不一樣。

那么，事件的綁定呢？

原來(lái)是使用v-on來(lái)綁定事件操作，而且還可以使用@代替v-on。

<div id="div1">

<input type="button" :value="btnValue" v-on:click="fn1()" @mouseover="fn2()"/>

</div>

<script type="text/javascript" src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范圍，不能直接使用body

data: { // 頁(yè)面需要的vue數(shù)據(jù)

btnValue: "點(diǎn)擊"

},

methods:{ // 頁(yè)面可使用的vue的函數(shù)

fn1: function(){

alert(this.msg);

},

fn2: function(){

this.btnValue = "點(diǎn)擊一下";

}

}

});

</script>

感謝各位的閱讀，以上就是“怎么理解Vue的v-bind屬性”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)怎么理解Vue的v-bind屬性這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！