vue事件绑定

最新推荐文章于 2024-04-19 18:32:11 发布

kangswx

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量170

点赞数

分类专栏： vue 文章标签： vue事件绑定 v-bind v-model v-on

本文链接：https://blog.csdn.net/kangswx/article/details/103222932

版权

vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue单向数据绑定v-bind
- 单向数据绑定，内存数据的改变影响页面数据的改变
- v-bind就是对属性的简单赋值，当内存中值改变，会触发重新渲染，只能由js修改页面的值，页面的值修改后无法修改js中的值
- v-bind可以简写为 :

v-bind使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-bind指令-单向数据绑定</title>
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<input type="text" v-bind:value='name' :class='name'/>
				</div>
			`,
			data: function(){
				return {
					name: 'hello'
				}
			}
		})
	</script>
</body>
</html>

vue双向数据绑定v-model，只作用于有value属性的元素
- 双向数据绑定，页面对于input的value值的改变，能影响内存中name变量
- 内存js改变name的值，会影响页面重新渲染最新值

v-model使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-model指令-双向数据绑定</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app"></div>

	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					<input type="text" :class='name' id='text2'><br>
					<input type="text" v-model='name' id='text1'><br>
					{{ name }}
				</div>
			`, //text2的class随着text1的值得改变在改变
			data: function(){
				return {
					name: 'hello'
				}
			}
		})
	</script>
</body>
</html>

vue事件绑定v-on:事件名=“表达式 || 函数名”，简写@事件名=“表达式 || 函数名”
- 事件名可以是原生的也可以是自定义的

v-on使用示例

<!DOCTYPE html>
<html>
<head>
	<title>v-on指令-事件绑定</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<div id="app"></div>


	<script type="text/javascript" src="vue.js"></script>
	<script type="text/javascript">
		new Vue({
			el:'#app',
			template: `
				<div>
					{{ name }}
					<button v-on:click='name="改变name的值"'>点击我改变name</button><br>
					{{ name2 }}
					<button v-on:click='changeName'>点击我改变name</button>
				</div>
			`, 
			data: function(){
				return {
					name: 'hello',
					name2: 'hello2'
				}
			},
			methods: {
				changeName: function(){
					this.name2 = "通过方法改变了"
				}
			}
		})
	</script>
</body>
</html>

kangswx

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue事件绑定

vue单向数据绑定v-bind单向数据绑定，内存数据的改变影响页面数据的改变v-bind就是对属性的简单赋值，当内存中值改变，会触发重新渲染，只能由js修改页面的值，页面的值修改后无法修改js中的值v-bind可以简写为 :v-bind使用示例<!DOCTYPE html><html><head> <title>v-bin...
复制链接

扫一扫

专栏目录