categories:
- vue基础
tags: - v-model双向绑定
目录
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model 数据双向绑定</title>
<style>
</style>
</head>
<body>
<div id="app">
<div>数据双向绑定,单行文本</div>
<!-- 数据双向绑定,单行文本-->
<p >{{ msg }}</p>
<input type="text" v-model="msg">
<hr>
<div>数据双向绑定,多行文本</div>
<!-- 数据双向绑定,多行文本-->
<p >{{ message }}</p>
<textarea v-model="message">
</textarea>
<hr>
<div>数据双向绑定,单个复选框</div>
<!-- 数据双向绑定,单个复选框-->
<p >{{ checked }}</p>
<input type="checkbox" name="checkbox" v-model="checked" value="单个复选框">
<hr>
<div>数据双向绑定,单个复选框</div>
<!-- 数据双向绑定,单个复选框-->
<p >{{ checks }}</p>
<input type="checkbox" name="checkbox1" v-model="checks" value="复选框1">
<input type="checkbox" name="checkbox2" v-model="checks" value="复选框2">
<input type="checkbox" name="checkbox3" v-model="checks" value="复选框3">
<input type="checkbox" name="checkbox4" v-model="checks" value="复选框4">
<hr>
<div>数据双向绑定,单选框按钮</div>
<!-- 数据双向绑定,单选框按钮-->
<p >{{ radio }}</p>
<input type="radio" name="man" v-model="radio" value="男">
<label for="man">男</label>
<input type="radio" name="women" v-model="radio" value="女">
<label for="women">女</label>
<hr>
<div>数据双向绑定,单个选择框</div>
<!-- 数据双向绑定,单个选择框-->
<p >{{ selected }}</p>
<select v-model="selected">
<option disabled value="">请选择</option>
<option>小湖春水</option>
<option>大漠落日</option>
<option>林海雪原</option>
</select>
<hr>
<div>数据双向绑定,多个选择框</div>
<!-- 数据双向绑定,多个选择框-->
<p >{{ selecteds }}</p>
<select v-model="selecteds" multiple >
<option disabled value="">请选择</option>
<option>小湖春水</option>
<option>大漠落日</option>
<option>林海雪原</option>
</select>
<hr>
<div>数据双向绑定,v-for动态渲染</div>
<!-- 数据双向绑定,v-for动态渲染-->
<p >{{ textSelecteds }}</p>
<select v-model="textSelecteds" multiple >
<option v-for="item in text" v-bind:value="item.value" >{{item.title}}</option>
</select>
<hr>
<div>数据双向绑定,使用 change 事件进行同步</div>
<!-- 数据双向绑定,使用 change 事件进行同步-->
<p >{{ lazytxt }}</p>
<input type="text" v-model.lazy="lazytxt" >
<hr>
<div>数据双向绑定,使用 trim 去空格 </div>
<!-- 数据双向绑定,使用 trim 去空格 -->
<p >{{ trimtxt }}</p>
<input type="text" v-model.trim="trimtxt" >
<hr>
</div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: {
msg:'',
message:'',
checked:'',
// 多个复选框需要使用数组形式
checks:[],
radio:'',
selected:'',
selecteds: [],
text:[
{title:'雷锋夕照',value:'雷锋夕照'},
{title:'夜半游园',value:'夜半游园'},
{title:'长亭惜别',value:'长亭惜别'}
],
textSelecteds:[],
lazytxt:'',
trimtxt:''
},
methods:{
}
})
</script>
</body>
</html>