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

发布时间:2022-12-03 09:30:58 作者:iii
来源:亿速云 阅读:107

本篇内容介绍了“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的输入框输入“打游戏”,则在datamessage属性的值也会变为“打游戏”

<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的区别是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!

推荐阅读:
  1. vue指令之表单控件绑定v-model v-model与v-bind结合使用
  2. v-bind v-model怎么在Vue.js中使用

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue v-model v-bind

上一篇:SpringBoot单点登录怎么实现

下一篇:如何使用React高阶组件解决横切关注点问题

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》