Vue语法：数据的双向绑定
1.指令v-model
- 使用v-model可以为输入元素创建数据双向绑定，他会根据元素的类型自动选取正确的方法来更新元素。下面的代码演示了单行文本框、多行文本框、单选按钮，复选框以及下拉选择框做了一个简单的演示。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>指令v-model</title>
</head>
<body>
<div id="app">
<h3>1.单行文本框</h3>
<input type="text" v-model="singleText" style="width: 240px;">
<p>{{singleText}}</p>
<h3>2.多行文本框</h3>
<textarea v-model="multiText" style="width: 240px;"></textarea>
<p>{{multiText}}</p>
<h3>3.单选框</h3>
<!--由于点击被选中的单选项无法取消其被选中的状态，所以一般没有使用单个选项的场景，设置v-model共用一个变量(radioValue)可以实现RadioGroup的效果-->
<input id="ra" type="radio" value="张三" v-model="radioValue">
<label for="ra">A.张三</label>
<input id="rb" type="radio" value="李四" v-model="radioValue">
<label for="rb">B.李四</label>
<p>{{radioValue}}</p>
<h3>4.单个复选框</h3>
<!--单个复选框被用于true和false的切换-->
<input id="c" type="checkbox" v-model="toggleValue">
<label for="c">哒哒哒</label>
<p>{{toggleValue}}</p>
<h3>5.多个复选框</h3>
<!--多个复选框，v-model接受数组类型的变量-->
<input id="ca" type="checkbox" value="AAA" v-model="checkedValues">
<label for="ca">AAAA</label>
<input id="cb" type="checkbox" value="BBB" v-model="checkedValues">
<label for="cb">BBBB</label>
<input id="cc" type="checkbox" value="CCC" v-model="checkedValues">
<label for="cc">CCCC</label>
<p>{{checkedValues.join(',')}}</p>
<h3>6.单项下拉选择框</h3>
<select v-model="singleSelect">
<!--如果没有设置value值，则option节点的文本值会被当做value值-->
<option value="zhangsan">张三</option>
<option >李四</option>
</select>
<p>{{singleSelect}}</p>
<h3>7.多项下拉选择框</h3>
<select multiple v-modle="multiSelect">
<!--按住Ctrl，可执行多选-->
<option value=1>语文</option>
<option value=2>数学</option>
<option value=3>历史</option>
<option :value="4">地理</option>
</select>
<p>{{multiSelect.join(',')}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data(){
return{
singleText:'',
multiText:'',
radioValue:'',
toggleValue:false,
checkedValues:[],
singleSelect:'zhangsan',
multiSelect:[1,3]
}
},
methods:{
}
});
</script>
</body>
</html>
2.v-model与修饰符
| 修饰符 | 可用版本 | 说明 |
|---|---|---|
| .lazy | 所有 | 将用户输入的数据赋值于变量的时间有输入时延迟到数据改变时 |
| .number | 所有 | 自动转换用户输入为数值类型 |
| .trim | 所有 | 自动过滤用户输入的首尾的空白字符 |
下面的代码展示了trim和number的简单用法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model与修饰符</title>
</head>
<body>
<div id="app">
<input type="text" v-model.trim.number="text" @keyup="handleKeyUp">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
var app = new Vue({
el:'#app',
data:()=>({
text:''
}),
methods:{
handleKeyUp(event) {
console.log(this.text,typeof this.text)
}
}
});
</script>
</body>
</html>
3.v-model与自定义组件
在自定义组件中，value属性和input事件尤为重要，value属性用于接收外部传入的值以更新组件内部的状态，input事件由开发者决定在什么事件调用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-model与修饰符</title>
</head>
<body>
<div id="app">
<!--自定义组件-->
<custom-screen v-model="text"></custom-screen><br>
<input type="text" v-model.trim.number="text">
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script>
Vue.component('custom-screen',{
//使用value属性接收外部传入的值
props:['value'],
methods: {
handleReset(){
console.log('重置为\'\'');
this.$emit('input','');//使用$emit发送input事件，并将目标值作为参数传出
}
},
template:'<div>\n' +
' <h2>输入值为：{{value}}</h2>\n' +
' <button @click="handleReset">重置为空</button>\n' +
'</div>'
})
var app = new Vue({
el:'#app',
data:()=>({
text:''
}),
methods:{
}
});
</script>
</body>
</html>
小白一枚，如有问题，请多多指教😃