属性绑定指令
属性绑定指令(三元表达式)
属性绑定指令(对象)
属性绑定指令(方法函数)
属性绑定指令(数组语法)
属性绑定指令之style(对象)
属性绑定指令之style(数组)
属性绑定指令之动态属性名
属性绑定指令之绑定对象
事件绑定指令

事件扩展绑定
事件函数参数传递


事件修饰符
条件渲染指令
IF条件判断
v-show条件渲染
template元素
循环渲染指令
循环遍历数组
遍历数组带索引
循环遍历对象
循环渲染key属性
不存在key属性
存在key属性
HTML节点树
Vue的VNode
跨平台
双向绑定指令
textarea文本框
checkbox单选框
checkbox多选框
radio单选框
select单选框和多选框
v-model修饰符

TOC

属性绑定指令

    如果我们希望，将HTML标签的属性变成一个动态的，由Vue响应式系统控制的，那么我们就可以使用属性绑定的功能，属性绑定使用v-bind指令，它可以绑定HTML标签内部的任何属性，但是需要注意的是，如果属性原来就存在，那么并不会覆盖原来的属性，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-bind:custom_attribute="custom_attribute">{{custom_attribute}}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                custom_attribute: "none"
            }
        }
    }).mount("#box")
</script>

属性绑定指令(三元表达式)

    属性绑定指令，不仅可以直接使用我们的data对应函数返回的对象属性，还可以是一个三元运算符，如下，使用三元运算符实现，两个状态之间的转换；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<style>
    .active {
        color: red;
    }
</style>
<div id="box">
    <p v-bind:class="isActive ? 'active' : ''">测试</p>
    <button v-on:click="this.isActive = !this.isActive">变色</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                isActive: false,
            }
        }
    }).mount("#box")
</script>

属性绑定指令(对象)

    属性绑定的值，也可以是一个对象，但是这个对象有点特殊，该对象的属性值都是Boolean类型，当值为true时，才会将对象的属性名加入HTML标签属性，反之，为false时，就不会加入HTML标签属性；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<style>
    .modifyColor {
        color: red;
    }

    .modifySize {
        font-size: 20px;
    }
</style>
<div id="box">
    <p v-bind:class="{ modifyColor : true ,modifySize:false}">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {}
        }
    }).mount("#box")
</script>

属性绑定指令(方法函数)

    属性绑定的方式除了支持data对应函数返回的对象属性、三元表达式、对象之外，还支持直接使用methods里面的函数；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<style>
    .active {
        color: red;
    }
</style>
<div id="box">
    <p v-bind:class="getActive()">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {}
        },
        methods: {
            getActive() {
                return {active: true}
            }
        }
    }).mount("#box")
</script>

属性绑定指令(数组语法)

    此外，属性绑定还可以直接绑定一个数组，这个数组的元素，就是属性值，所以它可以结合上面的三元表达式、对象、函数、以及data返回的对象来表示；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-bind:class="[getActive(),{active: true},active?'active':'',Tactive]">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                Tactive: 'acitve',
                active: true
            }
        },
        methods: {
            getActive() {
                return {active: true}
            }
        }
    }).mount("#box")
</script>
<!-- 结果如下 -->
<div id="box" data-v-app=""><p class="active active active acitve">测试</p></div>

属性绑定指令之style(对象)

    如果我们希望使用属性绑定指令来绑定我们是style属性也是可以的，对于style属性的绑定，它是以对象的形式来绑定的，因为在JavaScript中，一个对象的属性名中，不可以使用"-"斜杠，所以一旦遇到"-"斜杠，那么就将"-"斜杠后面的字母大写即可，Vue模版渲染引擎会自动将其解析成正确的样式，当然，如果我们直接写带"-"斜杠属性名，也可以，只不过需要加上引号，将其表示为一个字符串；
    如下，可以直接将我们的属性值，放在data函数的返回值里面，Vue模版引擎在渲染时，会自动在里面去取值；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-bind:style="{ color: Color,fontSize: '30px','font-style': 'oblique' }">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                Color: "red"
            }
        }
    }).mount("#box")
</script>

属性绑定指令之style(数组)

    使用属性绑定指令来绑定style属性，除了上面的对象语法，也支持数组语法，但是数组内部依旧是一个一个的对象，和上面的使用基本一样，但是和对象不同的是，在数组内部，我们可以直接使用方法函数，只要这个方法函数返回一个对象即可，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-bind:style="[{ color: Color },{fontSize: '30px'},getStyle()]">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                Color: "red"
            }
        },
        methods: {
            getStyle() {
                return {
                    'font-style': 'oblique'
                }
            }
        }
    }).mount("#box")
</script>

属性绑定指令之动态属性名

    如果我们的属性名称也需要动态绑定，那么使用直接计算属性的格式即可，在Vue模版引擎渲染时，会自动去下面data函数返回的对象里面查找，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-bind:[name]="{fontSize:'30px'}">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "style"
            }
        }
    }).mount("#box")
</script>

属性绑定指令之绑定对象

    如果我们希望将一个对象直接绑定到一个HTML标签上，对象的key作为HTML标签的属性名，value作为HTML标签的属性值也是可以的，直接使用"v-bind="语法即可，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-bind="attrs">测试</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                attrs: {class: "cce", style: "color: red;font-size: 30px"}
            }
        }
    }).mount("#box")
</script>

事件绑定指令

    在Vue中也提供了事件绑定的指令，支持绑定原生JavaScript中的所有事件类型，主要是使用"v-on:"指令来绑定指定的事件，它的缩写形式为"@"，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <button v-on:click="ButtonClick">点击打印</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "cce"
            }
        },
        methods: {
            ButtonClick() {
                console.log(this.name)
            }
        }
    }).mount("#box")
</script>

    在绑定事件时，它的值可以是一个方法函数，也可以是一个表达式，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <button v-on:click="counter++">{{counter}}</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                counter: 0
            }
        }
    }).mount("#box")
</script>

事件扩展绑定

    如果我们希望同时绑定多个事件，方式有两种，我们可以一个一个的定义，也可以使用对象的形式来定义，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <span>一个一个定义</span><input type="text" v-on:change="Change" v-on:focus="Focus">
    <span>对象形式定义</span><input type="text" v-on="{change:Change,focus:Focus}">
</div>
<script>
    Vue.createApp({
        data() {
            return {}
        },
        methods: {
            Focus() {
                console.log("获得焦点了")
            },
            Change() {
                console.log("内容改变了")
            }
        }
    }).mount("#box")
</script>

事件函数参数传递

    在默认情况下，如果我们的方法函数没有任何参数，在定义事件语法时，直接将方法函数的标识符给定到事件属性时，在触发事件的那一刻，默认会给事件函数传递一个event对象，这个event对象，就是

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <button v-on:click="Click">按钮</button>
</div>
<script>
    Vue.createApp({
        methods: {
            Click(event) {
                console.log(event)
            }
        }
    }).mount("#box")
</script>

    那么如果我们希望显式地给事件函数传递参数，也是可以的，并且，我们还可以直接将data函数返回的对象里面的属性作为参数传递给事件函数，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <button v-on:click="Click(name)">按钮</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "cce"
            }
        },
        methods: {
            Click(name) {
                console.log(name)
            }
        }
    }).mount("#box")
</script>

    可以看到，虽然上面我们实现了自定义参数的传递，但是在这种场景下，不会再传递event对象，那么如果我们又希望拿到event对象，也希望有自定义参数，那么就需要显示传递event对象，在Vue事件函数传参的过程中，如果希望显示传递event对象，就需要使用到$event修饰符来表示，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <button v-on:click="Click(name,$event)">按钮</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "cce"
            }
        },
        methods: {
            Click(name,event) {
                console.log(name,event)
            }
        }
    }).mount("#box")
</script>

事件修饰符

    在Vue的事件处理中，提供了很多修饰符，所谓修饰符，指的就是对当前事件进行一些特殊处理，如停止冒泡、取消默认事件等，具体的事件修饰符如下；

v-on:event_name.stop：调用event.stopPropagation()方法，阻止事件冒泡；
v-on:event_name.prevent：阻止默认行为，比如<a>标签，默认会跳转，我们可以使用prevent来阻止这个跳转；
v-on:event_name.capture：修改事件模式为事件捕获模式，即使事件触发从包含这个元素的顶层开始往下触发；
v-on:event_name.self：阻止事件冒泡除了使用.stop修饰符，还有一种修饰符.self，意思是只有点击自己的时候才会被执行，只不过加的位置要加在外层DOM元素的事件上；
v-on:event_name.once：绑定了事件以后只能触发一次，第二次就不会触发；
v-on:event_name.left：当点击鼠标左键时触发；
v-on:event_name.right：当点击鼠标右键时触发；
v-on:event_name.middle：当点击鼠标中键时触发；
v-on:event_name.passive：事件的默认行为立即执行，无需等待事件回调执行完毕；

条件渲染指令

    条件渲染说白了，就是IF语句，当需要根据某种条件来决定某些元素或组件是否渲染时，那么这个时候，就需要进行条件判断了，在Vue里面，进行条件判断，主要提供了两种语法，如下；

v-if/v-else/v-else-if：IF条件判断；
v-show：Boolean值判断，当值为true时会渲染，false则不进行渲染；

IF条件判断

    IF条件判断，和原生JavaScript中的IF条件判断的逻辑没什么区别，无非就是判断条件是否为真，为真则渲染，否则执行else中的逻辑，当然，也可以使用"v-else-if"指令实现多IF多分支条件判断，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>
        <span v-if="name == 'cce'">v-if</span>
        <span v-else-if="name == 'cfj'">v-else-if</span>
        <span v-else>v-else</span>
    </p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: 'yml'
            }
        }
    }).mount("#box")
</script>

v-show条件渲染

    Vue的模版引擎，还提供了另一种条件渲染的指令，即v-show指令，该指令需要对应一个Boolean值，当为true时，v-show所在的标签将会被Vue模版引擎渲染，当为false时，Vue模版引擎将跳过渲染；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p>
        <span v-show="show">v-show</span>
    </p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                show: true
            }
        }
    }).mount("#box")
</script>

  • 注意：v-show时不支持<template>标签的，此外，v-show和IF条件判断进行的渲染，两者本质时不一样的，IF条件判断中模版引擎就不会渲染，而v-show会进行渲染，但是它会加入一个display属性，由v-show的对应的Boolean值来控制这个display是否为none，当为none则会隐藏元素；

template元素

    v-if/v-else-if/v-else/v-show它们都是一个指令，必须添加在一个元素上面，但是如果我们只是希望多个元素之间切换，此时如果我们使用div，那么页面中将多出一个无用的div元素，那么在这种场景下，我们可以使用template元素，Vue在遇到template元素时，不会将这个元素渲染到页面上，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <template v-if="show">v-if</template>
    <template v-else>v-else</template>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                show: true
            }
        }
    }).mount("#box")
</script>

循环渲染指令

    在Vue模版引擎中，同样的也支持循环语法，可以循环的去迭代某一个可迭代对象，然后将迭代出来的元素一个一个渲染到页面上，所以，只要是可迭代对象，循环渲染指令都可以去迭代，那么Vue模版语言中，主要使用v-for指令实现循环渲染；
    此外，循环迭代的对象一般可以来自于data函数返回的对象，也可以是props，同时也可以是一个计算属性；

循环遍历数组

    作为前端都会从后端使用网络请求获取数据，去渲染一个列表，那么针对渲染一个列表的接口，一般返回的都是一个数组对象，那么如果我们需要对这个数组对象进行渲染，就避免不了需要用到循环的语法，所以这个时候就可以借助v-for来实现；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <ul>
        <li v-for="user in users">{{ user }}</li>
    </ul>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                users: ['cce', 'cfj', 'csw', 'dxf']
            }
        }
    }).mount("#box")
</script>

遍历数组带索引
    同时，如果我们希望在遍历的时候，能够在取出元素的同时，拿到元素在这个对象里面的索引值，可以使用"(item,index) in obj"这种语法来获得，需要注意的是，元素在前，索引值在后；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <ul>
        <li v-for="(user,index) in users">元素{{ user }}索引值为{{index}}</li>
    </ul>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                users: ['cce', 'cfj', 'csw', 'dxf']
            }
        }
    }).mount("#box")
</script>

循环遍历对象

    对于v-for来讲，它不仅可以遍历数组，同样可以遍历对象，但是需要注意的是，如果遍历对象，当我们在遍历时，接收标识符为一个时，那么这个标识符接收到的就时value，如果接收标识符为两个时，前者为value，后者为key，这里有点不一样，需要注意；
    同时，在遍历对象时，我们接收的标识符也可以有三个，分别代表，value、key和index，第一个参数为value，第二个参数为key，第三个参数为index，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <ul>
        <li v-for="value in users">属性值为：{{ value }}</li>
    </ul>
    <ul>
        <li v-for="(value,key) in users">属性名为：{{ key }}，属性值为：{{value}}</li>
    </ul>
    <ul>
        <li v-for="(value,key,index) in users">属性名为：{{ key }}，属性值为：{{value}}，索引值为：{{ index }}</li>
    </ul>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                users: {
                    cce: {age: 26, gender: "M"},
                    cfj: {age: 14, gender: "F"},
                }
            }
        }
    }).mount("#box")
</script>

循环渲染key属性

    在Vue中，使用v-for来实现循环渲染时，经常会配合一个key属性，这个key属性主要是给Vue框架使用的，这个key属性一般是一个唯一值，如果后端返回的数据存在一个唯一值，我们可以使用这个唯一值作为key的值，如果不存在这么一个唯一值，我们可以使用迭代出来的索引值作为这个key的值；
    Vue官方给它的作用说明是，key属性的主要作用是用在虚拟DOM算法上，在新旧DOM对比时，辨别VNodes，怎么理解呢，Vue内部为了提升v-for循环渲染的性能，所以才提出了这个key的属性，如果存在key属性，会采用一种渲染的算法，如果不存在key属性，又会采用另一种渲染的算法；
不存在key属性
    假设现在有一个数组需要使用v-for渲染，这个数组内部有A、B、C、D四个元素，第一次渲染完成之后，又发生了修改，在C的前面新增了一个E，那么就会形成A、B、E、C、D五个元素，那么这个时候，如果存在key属性，那么Vue在渲染的时候，会使用diff算法来解析这个DOM，A和B将不会被修改，C将会原地修改为E，D将会原地修改为C，然后新增一个D；
    这种算法效率非常低下，如果我们的数组内容非常多，那么插入的位置后面所有的元素将会全部重新渲染一遍；
存在key属性
    那么如果存在key属性，Vue内部会有一个算法，它会识别到节点的key值，如果旧元素的key和新元素的key一致，那么，将不会重新渲染这些没有变化的元素，尽量的去复用元素，极大的提高了效率，所以在使用v-for指令时，尽量将key属性带上，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <ul>
        <li v-for="(value,index) in users" v-bind:key="index">{{ value }}</li>
    </ul>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                users: ['cce', 'csw', 'cfj']
            }
        }
    }).mount("#box")
</script>

HTML节点树

    HTML DOM是以树结构来表达的，因此又被称作节点树，如下图所示如果我们忽略Document，那么HTML就是整棵树的根节点，head和body元素是HTML的子节点，而HTML是head和body的父节点，head和body相互之间是兄弟节点；

Vue的VNode

    在HTML结构当中，不论是元素还是注释甚至是属性它们都是一个node，那么什么是VNode呢，VNode的全称是Virtual Node，即虚拟节点，那么在Vue中，无论是组件还是元素，它们在Vue里面最终表现出来的都是一个一个都虚拟节点；
    在起初，我们将代码直接写到template属性里面，作为template属性的值，交给Vue渲染，那么因为如果template的值为空时，默认会将Vue实例的mount方法，所挂载的元素内的元素作为template的值，这些值都是一个一个未经渲染的模版文档，那么Vue在解析这个模版时，会将他们渲染成一个一个的VNode，最后，Vue才会将这个VNode解析成HTML文档，如下示例，就是Vue中VNode的结构；

# 模版语言
<div class="title" style="font-size: 30px;color: red;">模版</div>
# 转换后的VNode
var nodes = {
    type: "div",
    props: {
        class: "title",
        style: {
            "font-size": "30px",
            "color": "red"
        },
    },
    children: "模版"
}
    所以，从这里我们可以看到，我们编写的Template模版语言最后都会被解析成VNode，而这个VNode会组成一个VDOM，最后Vue模版引擎会将这个VDOM真正的转化成HTML文档，流程如下；

跨平台
    那么既然有了VDOM这个中间层，带来的好处就非常大了，最显著的明显就是跨平台，我们只需要在VDOM解析成HTML DOM，这个解析的过程做好不同平台之间的转换规则就行了，从而就实现了跨平台；

双向绑定指令

    首先，双向数据绑定主要是使用v-model指令，一般来讲，它主要是配合input、checkbox、redio和select元素使用，是一种表单开发是非常常见的功能，那么知道它主要作用的地方之后，我们就可以来理解一下什么是双向数据绑定；
    首先，不管是input、checkbox、redio还是select，它们都值都是在用户侧可变的，那么拿input的text类型来举例，input有一个属性，即value，这个value属性的值就是这个input框的内容，那么在Vue里面，我们可以使用v-bind将value设置成动态绑定到data函数返回的对象内，让Vue响应式系统去管理这个数据，一旦发生改变就立即显示到input输入框中；
    那么又因为input标签是可以输入内容的，那么如何将用户输入的最新的内容放在响应式数据内呢，v-model提供了这种功能，从而实现了，data函数返回的对象内对应的属性值发生变化会立即显示到input输入框内，输入框内数据发生变化又会触发input事件，该input事件会立即将用户输入到input框里的内容，重新赋值给data函数返回的对象内对应的属性，从而实现双向数据绑定，这也就是v-model所提供功能；
    所以，从更深一层去理解这个双向数据绑定，其实我们可以这样理解它，如下；

<input type="text" v-bind:value="searchText" v-on:input="searchText = $event.target.value"> 
# searchText是data函数返回的响应式对象内的属性
# $event.target是触发事件的对象，而value是元素的值

textarea文本框

    v-model除了可以绑定input之外，还可以绑定textarea元素，如下，为了能够显式的看到文本框的变化，加入watch侦听器，实时打印data函数返回的对象内的属性的变化，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <textarea name="" id="" cols="30" rows="10" v-model="content"></textarea>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                content:""
            }
        },
        watch: {
            content: {
                handler(newValue,oldValue){
                    console.log(newValue)
                }
            }
        }
    }).mount("#box")
</script>

checkbox单选框

    checkbox单选框，也可以直接使用v-model指令来绑定，它绑定的属性一般是一个Boolean的值，当选中时，属性值为true，反之为false，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <label for="agree">
        <input id="agree" type="checkbox" v-model="flag">单选框
    </label>
    <p>checkbox单选框<span>{{ flag }}</span></p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                flag: false
            }
        }
    }).mount("#box")
</script>

checkbox多选框

    checkbox不仅可以做单选框，也可以做多选框，但是多选框需要注意几点，第一每个checkbox所在的input元素必须具备一个value值，第二点，所有的checkbox的input元素都使用v-model绑定一个元素，且这个元素是一个数组，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <div class="hobbys">
        <label for="tourism">
            <input id="tourism" type="checkbox" v-model="hobbys" value="tourism">旅游
        </label>
        <label for="game">
            <input id="game" type="checkbox" v-model="hobbys" value="game">游戏
        </label>
        <label for="food">
            <input id="food" type="checkbox" v-model="hobbys" value="food">美食
        </label>
    </div>
    <p>checkbox多选框 <span>{{ hobbys }}</span></p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                hobbys: []
            }
        }
    }).mount("#box")
</script>

radio单选框

    radio单选框，一样也可以使用我们都v-model，我们只需要将他们绑定同一个属性，它们之间就会形成互斥，但是需要注意都是，不要忘记写value，如果我们希望实现默认选中，只需要将绑定的属性值设置成想要默认选中的值即可，Vue模版引擎内部会进行判断，然后实现默认选中，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <div class="gender">
        <label for="tourism">
            <input id="male" type="radio" v-model="gender" value="male">男
        </label>
        <label for="game">
            <input id="female" type="radio" v-model="gender" value="female">女
        </label>
    </div>
    <p>radio单选框 <span>{{ gender }}</span></p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                gender: undefined
            }
        }
    }).mount("#box")
</script>

select单选框和多选框

    select是一个同时支持单选和多选的一个选择框，那么在单选的时候，直接在select元素上使用v-model绑定一个属性即可，而多选，直接在select元素上使用v-model绑定一个数组即可，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <select v-model="fruit" id="">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
    </select>
    <p>select单选 <span>{{ fruit }}</span></p>
    <select multiple size="3" v-model="fruits" id="">
        <option value="apple">苹果</option>
        <option value="orange">橘子</option>
        <option value="banana">香蕉</option>
    </select>
    <p>select多选 <span>{{ fruits }}</span></p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                fruit: "orange", // 默认选中橘子
                fruits: ["banana"] // 默认选中香蕉
            }
        }
    }).mount("#box")
</script>

v-model修饰符

    Vue框架给v-model提供了三个修饰符，lazy、number和trim，主要就是为了提升体验度，为了减少一些不必要的麻烦或者校验；
    lazy的主要作用是，当用户使用v-model之后，用户每次修改输入内容，都会将后台的数据同时绑定，为了避免这种情况的发生，使用lazy修饰符来进行限定，只有当用户的input中失去焦点或者用户点击回车按钮时，才会将后台的数据进行修改；
   number的主要作用是，当用户在input中输入数字时，浏览器会默认将输入的数字转化为string类型，使用number修饰符来将输入的数字转为number类型；
    trim的主要作用是，因为用户可能输入的字符串中含有空格，这样系统在处理时可能会出现错误，使用trim修饰符来去掉字符串首部或者尾部的所有空格；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <label for="username">姓名
        <input id="username" type="text" v-model.trim="username">
    </label>
    <h1>姓名为:{{ username }}</h1>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                username: undefined
            }
        }
    }).mount("#box")
</script>

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注