v-bind與v-on使用案例詳解
- php中世界最好的语言原創
- 2018-05-14 13:52:122507瀏覽
這次帶給大家v-bind與v-on使用案例詳解，v-bind與v-on使用注意事項有哪些，下面就是實戰案例，一起來看一下。
v-bind 指令用於回應地更新HTML 特性形式如：v-bind:href 縮寫為 :href;
#v-on 指令用於監聽DOM事件 形式如：v-on:click 縮寫為@click;
<body>
<p id="test">
<img v-bind:src="src">
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
<a href="{{url}}" rel="external nofollow" >百度一下</a>
<a v-on:click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
<a @click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
</p>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
url: "https://www.baidu.com",
src: "img/spring.jpg"16 17 18 },
methods: {
update: function(){
this.src = "img/summer.jpg";
}
}
})
</script>
</body>
note: vue.js 1.0版本後才有的這兩個指令
v- bind,v-on的縮寫
建構單頁應用程式（SPA ）時，Vue.js 會管理所有的模板，此時v- 前綴也沒那麼重要了。因此Vue.js 為兩個最常用的指令v-bind 和v-on 提供特別的縮寫：
下面給大家介紹下v-bind縮寫：##
<!-- 完整语法 --> <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <!-- 缩写 --> <a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写 --> <button :disabled="someDynamicCondition">Button</button>
v-on縮寫：
<!-- 完整语法 --> <a v-on:click="doSomething"></a> <!-- 缩写 --> <a @click="doSomething"></a>相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ 推薦閱讀：
vuex localstorage動態監聽storage步驟詳解
#
以上是v-bind與v-on使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn