Vue3 | 双向绑定 及其 多种指令、修饰符的实践
本文内容提要
v-model**双向绑定【input例】**v-model**双向绑定【textarea例】**v-model**双向绑定【CheckBox例】**- 使用**
true-value**和**false-value**自定义checkbox的布尔绑定值 v-model**双向绑定【CheckBox例（升级版）】**v-model**双向绑定【radio例】**v-model**双向绑定【select（单选）例】**v-model**双向绑定【select（多选）例】**- 使用**
v-for**优化以上代码，实现同样效果 - 点击UI存储对应数据结构 的技巧
v-model**的**.lazy**修饰符【input例】**v-model**的**.number**修饰符【input例】**v-model**的**.trim**修饰符【input例】**
v-model双向绑定【input例】
如下代码，input的内容 与 testString**字段的数据 双向绑定，**
文本显示了 testString**字段的数据的内容，**
此时，
手动改动 testString**字段的值，**
input的内容会跟着改变；
手动输入改变input的内容，
testString**字段的值也会跟着改变（体现在**{{testString}}**这里）;**
所谓 双向绑定：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World! heheheheheheda</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="heheApp"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
testString: 'luelueluelalala'
}
},
template: `
<div>
{{testString}}
<input v-model="testString">
</div>`
});
const vm = app.mount('#heheApp');
</script>
</html>
手动改动 testString字段的值，input的内容会跟着改变；
手动改变input的内容， testString字段的值也会跟着改变
v-model双向绑定【textarea例】
<script>
const app = Vue.createApp({
data() {
return {
testString: 'luelueluelalala'
}
},
template: `
<div>
{{testString}}
<textarea v-model="testString" />
</div>`
});
const vm = app.mount('#heheApp');
</script>效果：
v-model双向绑定【CheckBox例】
<script>
const app = Vue.createApp({
data() {
return {
testString: false
}
},
template: `
<div>
{{testString}}
<input type="checkbox" v-model="testString" />
</div>`
});
const vm = app.mount('#heheApp');
</script>运行效果：
勾选：
使用true-value和false-value自定义checkbox的布尔绑定值
true-value**定义的值覆盖checkbox的**true**，**
false-value**定义的值覆盖checkbox的**false**，**
即当checkbox的值为**true-value**定义的字符串时，
checkbox显示为选中状态，
false-value**时为不选中状态：**
注意这里是用字符串做值，有双引号包裹； 原始的布尔值，没有字符串包裹；
<script>
const app = Vue.createApp({
data() {
return {
testString: "lueluelue"
}
},
template: `
<div>
{{testString}} <br>
<input type="checkbox" v-model="testString"
true-value="heheda" false-value="lueluelue">
</div>`
});
const vm = app.mount('#heheApp');
</script>效果：
v-model双向绑定【CheckBox例（升级版）】
给**CheckBox组件**配置**value**属性，
使用**v-model**将**CheckBox组件**与一个**数组**双向绑定，
当**CheckBox组件**被勾选时，
勾选到的**CheckBox组件**的**value属性值**会加到其对应绑定的**v-model**数组字段中：
<script>
const app = Vue.createApp({
data() {
return {
testString: [],
checkboxValue1: "heheda",
checkboxValue2: "lueluelue",
checkboxValue3: "xixixi"
}
},
template: `
<div>
{{testString}} <br>
{{checkboxValue1}} <input type="checkbox" v-model="testString" :value="checkboxValue1" /><br>
{{checkboxValue2}} <input type="checkbox" v-model="testString" :value="checkboxValue2" /><br>
{{checkboxValue3}} <input type="checkbox" v-model="testString" :value="checkboxValue3" />
</div>`
});
const vm = app.mount('#heheApp');
</script>运行效果：
v-model双向绑定【radio例】
区分一下这个内容：
CheckBox**可以**多选**，选中数据可以用**数组**存储；**
radio**只能**单选**，选中数据 按逻辑应用 一个**变量字段**存储；**
<script>
const app = Vue.createApp({
data() {
return {
testString: '',
checkboxValue1: "heheda",
checkboxValue2: "lueluelue",
checkboxValue3: "xixixi"
}
},
template: `
<div>
{{testString}} <br>
{{checkboxValue1}} <input type="radio" v-model="testString" :value="checkboxValue1" /><br>
{{checkboxValue2}} <input type="radio" v-model="testString" :value="checkboxValue2" /><br>
{{checkboxValue3}} <input type="radio" v-model="testString" :value="checkboxValue3" />
</div>`
});
const vm = app.mount('#heheApp');
</script>
v-model双向绑定【select（单选）例】
<script>
const app = Vue.createApp({
data() {
return {
testString: '',
checkboxValue1: "heheda",
checkboxValue2: "lueluelue",
checkboxValue3: "xixixi"
}
},
template: `
<div>
{{testString}} <br>
<select v-model="testString">
<option disabled value=''>请选择内容</option>
<option :value="checkboxValue1">{{checkboxValue1}}</option>
<option :value="checkboxValue2">{{checkboxValue2}}</option>
<option :value="checkboxValue3">{{checkboxValue3}}</option>
</select>
</div>`
});
const vm = app.mount('#heheApp');
</script>
v-model双向绑定【select（多选）例】
注意两个地方——**数组字段**、**multiple**关键字：
<script>
const app = Vue.createApp({
data() {
return {
testString: [],
checkboxValue1: "heheda",
checkboxValue2: "lueluelue",
checkboxValue3: "xixixi"
}
},
template: `
<div>
{{testString}} <br>
<select v-model="testString" multiple>
<option :value="checkboxValue1">{{checkboxValue1}}</option>
<option :value="checkboxValue2">{{checkboxValue2}}</option>
<option :value="checkboxValue3">{{checkboxValue3}}</option>
</select>
</div>`
});
const vm = app.mount('#heheApp');
</script>效果：
使用v-for优化以上代码，实现同样效果
<script>
const app = Vue.createApp({
data() {
return {
testString: [],
options:[{
text: 'heheda', value: 'heheda'
},{
text: 'lueluelue', value: 'lueluelue'
},{
text: 'xixixi', value: 'xixixi'
}]
}
},
template: `
<div>
{{testString}} <br>
<select v-model="testString" multiple>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
</div>`
});
const vm = app.mount('#heheApp');
</script>点击UI存储对应数据结构 的技巧
<script>
const app = Vue.createApp({
data() {
return {
testString: [],
options:[{
text: 'heheda', value: {value: 'heheda'}
},{
text: 'lueluelue', value: {value: 'lueluelue'}
},{
text: 'xixixi', value: {value: 'xixixi'}
}]
}
},
template: `
<div>
{{testString}} <br>
<select v-model="testString" multiple>
<option v-for="item in options" :value="item.value">{{item.text}}</option>
</select>
</div>`
});
const vm = app.mount('#heheApp');
</script>效果：
v-model的.lazy修饰符【input例】
被**.lazy**修饰的**v-model**属性，其对应配置的组件，如input，
不再会在往input输入内容时，**即时性**地**双向同步**数据了，
而是在往input输入内容后，
点击**其他组件**或者**位置**使得**input**失去**焦点**时，
再进行**双向数据同步**：
这样再某些场景下，可以减少多余的大部分事件的处理， 达到提升性能的效果；
<script>
const app = Vue.createApp({
data() {
return {
testString: "lueluelue"
}
},
template: `
<div>
{{testString}} <br>
<input v-model.lazy="testString">
</div>`
});
const vm = app.mount('#heheApp');
</script>效果：
没有即时同步：
点击其他地方时同步：
v-model的.number修饰符【input例】
使得**输入框**在输入的内容后 通过**双向绑定特性** 将值存进**数据字段**的时候，
会先将值（当然主要是支持数字内容的字符串） 转换成**number**类型，
再存进**数据字段**：
<script>
const app = Vue.createApp({
data() {
return {
testString: "123"
}
},
template: `
<div>
{{typeof testString}} <br>
<input v-model.number="testString">
</div>`
});
const vm = app.mount('#heheApp');
</script>运行，初始为String类型，因初始赋值为String类型：
随后，点击输入数字，会转换成number类型：
v-model的.trim修饰符【input例】
v-model**的**.trim**修饰符，**
使得**输入框**在输入的内容后 通过**双向绑定特性** 将值存进**数据字段**的时候，
会先将值 的 前后的空格去除（值的中间存在的空格不去除），
再存进**数据字段**：
<script>
const app = Vue.createApp({
data() {
return {
testString: "123"
}
},
template: `
<div>
{{testString}} <br>
<input v-model.trim="testString">
</div>`
});
const vm = app.mount('#heheApp');
</script>加**.trim**修饰符之前：
加**.trim**修饰符之后：
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录