這次帶給大家vue.js中v-bind和v-on使用案例詳解，vue.js中v-bind和v-on使用的注意事項有哪些，以下就是實戰案例，一起來看一下。
<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>
以上是vue.js中v-bind和v-on使用案例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
