Vue中v-model，v-bind，v-on的区别是什么

本篇内容介绍了“Vue中v-model，v-bind，v-on的区别是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

v-model

v-model是进行动态双向绑定的（只能用在input, textarea, select上），以input为例，进行绑定后，vue对象中data的相应值会与input的输入同步变动。

// html<input type="text" v-model="message">new Vue({data {message: ' ', //最开始message为空} })

如果我们在input的输入框输入“打游戏”，则在data中message属性的值也会变为“打游戏”。

<input type="text" v-model="message">  / /在input中输入：打游戏data {message: '今天好困 ',   // 此时message中数据自动更新为"打游戏"}

v-bind（缩写为 : ）

通常来说，当我们需要给一个<a href=""></a>标签赋值时，可以直接给href属性赋上相应的地址即可，但是这样，往往会导致代码不灵活。为了使得标签的一些属性可以动态的改变，我们可以在这些标签加上v-bind属性。
当data中url属性改变后，相应的，<a></a>标签的href值也会改变。

<a v-bind:href="url" rel="external nofollow" >网络测试</a>  //v-bind绑定href。new Vue({...data {url: "Http://www.baidu.com"}})

类似的，对于其他标签，我们可以将标签中的属性值与vue对象中data相应的值绑定。如下列代码中的，class属性绑定isPlaying，src属性绑定picUrl

<div class="player_con" :class="{playing:isPlaying}">    <img src="images/player_bar.png" class="play_bar" />    <img :src="picUrl" class="cover autoRotate" /></div>new Vue({...data {isPlaying: true,picUrl:"www.xxx.com"}})

v-on（缩写为@）

v-on属性绑定是HTML事件，例如：

<!-- 完整语法 --><a v-on:click="doSomething(tmp)">123</a><!-- 缩写 --><a @click="doSomething(tmp)">123</a>new Vue({...methods:{doSomething(tmp){}}})

“Vue中v-model，v-bind，v-on的区别是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！