Vue的学习（八）

Vue的学习（八）

v-model原理

v-model 其实是一个语法糖，它的背后本质上是包含两个操作：

1. v-bind绑定一个value属性
2. v-on指令给当前元素绑定input事件

参考代码

<input type="text" v-model="message">
<!-- 等同于下面 -->
<input type="text" :value="message" @input="message = $event.target.value">

v-model与radio

radio是input的单选框属性

参考代码

<div id="app">
    <label for="male">
        <input type="radio" id="male" value="男" v-model="sex">男
    </label>
    <label for="female">
        <input type="radio" id="female" value="女" v-model="sex">女
    </label>
    <h2>您选择的性别是：{{sex}}</h2>
</div>

---

const example = new Vue({
    el:"#app",
    data:{
        sex:""
    }
});

运行效果如下：

radio在没绑v-model的情况下，可以使用name属性并给需要进行单选的选项添加相同的属性值来实现单选。

v-model与checkbox

单选小例：

选择同意后才可以进行下一步：

参考代码

<div id="app">
    <label for="agree">
        <input type="checkbox" id="agree" v-model="isAgree">同意
    </label>

    <button :disabled="!isAgree">下一步</button>
</div>

---

const example = new Vue({
    el:"#app",
    data:{
        isAgree:false
    }
});

运行效果如下：

多选小例：

爱好收集：

参考代码

<div id="app">

    <label id="one">
        <input type="checkbox" id="one" value="前端开发" v-model="favorite">前端开发
    </label>
    <label id="two">
        <input type="checkbox" id="two" value="移动开发" v-model="favorite">移动开发
    </label>
    <label id="three">
        <input type="checkbox" id="three" value="JavaScript" v-model="favorite">JavaScript
    </label>
    <label id="four">
        <input type="checkbox" id="four" value="H5开发" v-model="favorite">H5开发
    </label>

    <h2>您确认的爱好有：{{favorite}}</h2>
</div>

---

const example = new Vue({
    el:"#app",
    data:{
        favorite:[]
    }
});

运行效果如下：

v-model与select

单选下拉框：

参考代码

<div id="app">
    <select name="abc" v-model="language">
        <option value="JavaScript">JavaScript</option>
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="Python">Python</option>
        <option value="Java">Java</option>
        <option value="MATLAB">MATLAB</option>
    </select>
    <h2>您选择的计算机语言是：{{language}}</h2>
</div>

---

const example = new Vue({
    el:"#app",
    data:{
        language:'JavaScript'
    }
});

运行效果如下：

---

多选下拉框：

参考代码

<div id="app">
    <select name="def" v-model="languages" multiple>
        <option value="JavaScript">JavaScript</option>
        <option value="HTML">HTML</option>
        <option value="CSS">CSS</option>
        <option value="Python">Python</option>
        <option value="Java">Java</option>
        <option value="MATLAB">MATLAB</option>
    </select>
    <h2>您选择的计算机语言有：{{languages}}</h2>
</div>

const example = new Vue({
    el:"#app",
    data:{
        languages:[]
    }
});

运行效果如下：

input与值绑定

v-bind（动态绑定）在input的运用

参考代码

<div id="app">
    <label v-for="item in objects" :for="item">
        <input type="checkbox" :id="item" :value="item" v-model="target">{{item}}
    </label>

    <h2>您选择的目标/爱好有：{{target}}</h2>
</div>

---

const example = new Vue({
    el:"#app",
    data:{
        target:[],
        objects:['前端开发','移动开发','H5开发','JavaScript']
    }
});

运行效果如下：

v-model修饰符

lazy修饰符

默认情况下，v-model默认是在input事件中同步输入框的数据的。

也就是说，一旦有数据发生改变，对应的data中的数据就会自动发生改变。

lazy修饰符可以让数据在失去焦点或者回车时才会更新

number修饰符

默认情况下，在输入框中无论我们输入的是字母还是数字，都会被当做字符串类型进行处理。

但是如果我们希望处理的是数字类型，那么最好直接将内容当做数字处理。

number修饰符可以让在输入框中输入的内容自动转成数字类型

trim修饰符

如果输入的内容首尾有很多空格，通常我们希望将其去除

trim修饰符可以过滤内容左右两边的空格