vue2.0 v-model指令
2024-08-29 07:53:30
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head> <body>
<div id="app">
<input type="text" v-model="userName" />
<input type="text" V-model.lazy="msg" />
<input type="text" V-model.number="num" />
<p>{{userName}}</p>
<p>{{msg}}</p>
<p>{{num}}</p>
<!--.lazy：取代 imput 监听 change 事件。
.number：输入字符串转为数字。
.trim：输入去掉首尾空格。-->
<!--通过v-once指令能执行一次性的插值，当数据变化时，插值处的内容不会更新。-->
<p v-once>一次改变{{userName}}</p>
</div>
<script>
var vm = new Vue({
el: "#app",
data: {
userName: "张三",
msg: "懒加载",
num: "222222"
}
})
vm.userName = '李四'
</script>
</body> </html>
双向绑定原理：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue双向绑定的核心原理getter和setter</title>
</head>
<body>
<input type="text" id="inp" value="admin" />
<script>
var inp = document.getElementById("inp");
Object.defineProperty(inp, "v-model", { //对象自定义按键修饰符别名
set: function(val) {
this.value = val //this指的是input
},
get: function() {
return this.value;
}
})
console.log(inp['v-model'])
inp["v-model"] = "hello" //vue就是利用这个set/get进行双向绑定,为什么我们一直要说是setter/getter
//因为setter与getter是面向对象语言中的一个特性,利用getter可以获取对象的属性,利用setter可以设置对象的属性.
</script>
</body> </html>
最新文章
- my first go
- ffmpeg 中添加264支持
- AWK 介绍
- JavaScript那些事儿(01): 对象
- javascript模式——Facade
- 发布Activex全过程
- c# 读取app.config遇到生成X.config.config问题
- Angular相关命令
- Android项目开发填坑记-Fragment的onAttach
- WordCount
- jQuery效果-----fadeIn()、fadeOut()、fadeToggle()、fadeTo()
- Verification of Model Transformations A Survey of the State-of-the-Art 模型转换的验证 对现状的调查
- apigateway-kong(六)认证
- (Java编程思想)Thinking in Java
- php 腾讯云 对象存储V5版本 获取返回的上传文件的链接方法
- 利用Junit实现eclipse单元测试
- 借读：分布式锁和双写Redis
- 【oneday_onepage】——Tastes differ!
- nginx 内置参数
- java基础问题解答