前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue3 | 双向绑定 及其 多种指令、修饰符的实践

Vue3 | 双向绑定 及其 多种指令、修饰符的实践

作者头像
凌川江雪
发布2021-03-08 22:24:08
2.4K0
发布2021-03-08 22:24:08
举报
文章被收录于专栏:李蔚蓬的专栏

完整原文地址见https://cloud.tencent.com/developer/article/1798676

本文内容提要

  • 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}}**这里);**

所谓 双向绑定:

代码语言:javascript
复制
<!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例】
代码语言:javascript
复制
<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例】
代码语言:javascript
复制
<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-valuefalse-value自定义checkbox的布尔绑定值

true-value**定义的值覆盖checkbox的**true**,**

false-value**定义的值覆盖checkbox的**false**,**

即当checkbox的值为**true-value**定义的字符串时,

checkbox显示为选中状态,

false-value**时为不选中状态:**

注意这里是用字符串做值,有双引号包裹; 原始的布尔值,没有字符串包裹;

代码语言:javascript
复制
<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**数组字段中:

代码语言:javascript
复制
<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**只能**单选**,选中数据 按逻辑应用 一个**变量字段**存储;**

代码语言:javascript
复制
<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(单选)例】
代码语言:javascript
复制
<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**关键字:

代码语言:javascript
复制
<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优化以上代码,实现同样效果
代码语言:javascript
复制
<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存储对应数据结构 的技巧
代码语言:javascript
复制
<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**失去**焦点**时,

再进行**双向数据同步**:

这样再某些场景下,可以减少多余的大部分事件的处理, 达到提升性能的效果;

代码语言:javascript
复制
<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**类型,

再存进**数据字段**:

代码语言:javascript
复制
<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**修饰符,**

使得**输入框**在输入的内容后 通过**双向绑定特性** 将值存进**数据字段**的时候,

会先将值 的 前后的空格去除(值的中间存在的空格不去除),

再存进**数据字段**:

代码语言:javascript
复制
<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 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本文内容提要
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档