你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app">
<!--第一种方法是使用ref进行的双向绑定,利用了$refs获取value值进行绑定-->
<h1>双向数据绑定: input,select,textarea</h1>
<label>姓名:</label>
<input type="text" ref="name" v-on:keyup="logName">
<span>{{name}}</span>
<label>年龄:</label>
<input type="text" ref="age" v-on:keyup="logAge">
<span>{{age}}</span>
<!--第二种则直接进行的双向绑定,使用了vue提供的v-model指令-->
<h1>另一种双向数据绑定</h1>
<label>姓名:</label>
<input type="text" v-model="name2">
<span>{{name2}}</span>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
app.js
new Vue({
el: '#app',
data: {
name: '',
name2: '',
age: ''
},
methods: {
logName: function() {
this.name = this.$refs.name.value;
},
logAge: function() {
this.age = this.$refs.age.value;
}
}
});
Vue系列文章目录
- vue系列文章(1):对象绑定,属性绑定
- Vue系列文章(2)事件绑定,鼠标点击事件
- vue系列文章(3):事件修饰符
- Vue系列文章(4)键盘事件及键盘修饰符
- vue系列文章(5)双向数据绑定
- vue系列文章(6)计算属性computed
- vue系列文章(7)动态CSS类型绑定
- vue系列文章(8)条件渲染
- vue系列文章(9)v-for条件循环
- vue系列文章(10)vue实战项目demo
- vue系列文章(11):初始化多个实例对象
- vue系列文章(12)初始组件的应用
- Vue系列文章(13)vue cli脚手架
- vue系列文章(14)vue-cli脚手架,组件嵌套,全局组件注册和局部组件注册
- vue系列文章(15)属性传值props
- vue系列文章(16)传值和传引用的类型和区别
- vue系列文章(17)利用事件传递将子组件值传递给父组件
- vue系列文章(18)vue生命周期
- vue系列文章(19)vue路由配置
- vue系列文章(20) vue网络请求vue-resource
如果上面文章对你有用,打赏下我吧@*@