1.v-model可以实现页面数据与Vue实例化对象中的data数据实现双向绑定
1.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-model</title>
</head>
<body>
<div id="app">
<!-- v-model实现数据双向绑定 -->
<form action="">
<!-- 普通写法 -->
<input type="text" :value="myval" @input="myinput" />
<h1>{{myval}}</h1>
<hr />
<!-- vue的双向绑定写法 data和表单双向绑定 -->
<input type="text" v-model="myval2" />
<h1>{{myval2}}</h1>
</form>
<hr>
<!-- 多行文本双向绑定 -->
<textarea v-model="text" name="" id="" cols="30" rows="10"></textarea>
<h1>{{text}}</h1>
<hr>
<!-- 复选按钮双向绑定 -->
<input type="checkbox" v-model="checked" id="myChecked">
<label for="myChecked">是否同意用户协议</label><!-- 当点击文字的时候也可以更换绑定 -->
<h1>{{checked}}</h1>
<div v-show="checked" style="width: 120px;height: 30px;background: pink;text-align: center;
line-height: 30px;color: #fff;">下一步</div>
<!-- 复选框多选 -->
<hr>
爱好:
<label><input v-model="arr" type="checkbox" value="chang">唱歌</label>
<label><input v-model="arr" type="checkbox" value="tiao">跳舞</label>
<label><input v-model="arr" type="checkbox" value="qiu">打篮球</label>
<label><input v-model="arr" type="checkbox" value="rap">rap</label>
<h1>{{arr}}</h1>
<!-- 下拉框 -->
<hr>
<select v-model="selected">
<option value="gz">高中</option>
<option value="zk">专科</option>
<option value="bk">本科</option>
<option value="yjs">研究生</option>
</select>
<h1>{{selected}}</h1>
<!-- 清除用户输入的空格 -->
<hr>
<input type="text" v-model.trim="name" @input="myIpt">
<h1>{{name}}</h1>
</div>
<script src="./js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
myval: "普通写法",
myval2: "vue双向绑定写法",
text: "",
checked: false,
arr: ["chang"],
selected: "gz",
name:""
},
methods: {
myinput(e){
// console.log(e.target.value);
this.myval = e.target.value;
},
myIpt(){
console.log(this.name);
}
}
})
</script>
</body>
</html>