v-model
-
预期：随表单控件类型不同而不同。
-
限制：
<input><select><textarea>- components
-
修饰符：
-
用法：
在表单控件或者组件上创建双向绑定。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双向绑定v-model与表单元素，修饰符.lazy,.number,.trim</title>
</head>
<body>
<div id="app">
<input type="text" :value="message" placeholder='绑定值' @input = "valueChange">
<input type="text" :value="message" placeholder='绑定值' @input = "message = $event.target.value">
<!-- v-model -->
<input type="text" v-model="message" placeholder='双向绑定'>
{{message}}
<div>
<!-- 单选按钮 如果没有绑定v-model ,要加name才是单选-->
<input type="radio" id= "male" value="男" v-model="sex">
<label for="male">男</label>
<input type="radio" id= "female" value="女" v-model="sex">
<label for="female">女</label>
<h3>性别是：{{sex}}</h3>
</div>
<div>
<!--checkbox 单选框 返回true,false -->
<lable>
<input type="checkbox" id="agree" v-model="isAgree">同意协议
</lable>
<button :disabled="!isAgree">下一步</button>
</div>
<div>
<!--checkbox多选框-->
<input type="checkbox" value="篮球" v-model="hobbies">篮球
<input type="checkbox" value="足球" v-model="hobbies">足球
<input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
<input type="checkbox" value="网球" v-model="hobbies">网球
<h3>你的爱好是：{{hobbies}}</h3>
<!--值绑定-->
<label v-for="item in hobbiesList">
<input type="checkbox" :id="item" :value="item" v-model="hobbies" >{{item}}
</label>
</div>
<div>
<!-- 选择框-->
<select v-model="hobbiesS">
<option disabled value=''>请选择</option>
<option >篮球</option>
<option >足球</option>
<option >羽毛球</option>
<option >网球</option>
</select>
<h3>你的爱好是：{{hobbiesS}}</h3>
</div>
<div>
<!--修饰符：lazy ,回车enter时和失去聚焦时，才是输入-->
<input v-model.lazy="message2">
<h4>{{message2}}</h4>
<!--修饰符；number，让输入框内的内容转为数字类型-->
<input type="number" v-model.number="age">
<h4>{{age}}--类型：{{typeof age}}</h4>
<!--修饰符：trim ,过滤内容左右两边的空格-->
<input v-model.trim="message2">
<h4>值：{{message2}}</h4>
</div>
</div>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
message: 'hello',
sex: '',
isAgree: '',
hobbies: [],
hobbiesS:'',
hobbiesList:['香蕉','牛奶','苹果','栗子'],
message2:'加油',
age: '',
},
methods: {
sub: function () {
},
valueChange(event){
this.message = event.target.value
}
}
})
</script>
</body>
</html>