Vue.js的核心学习笔记 - 第十章表单双向绑定

2024-02-17 13:19:28

Vue.js的核心学习笔记 - 第十章表单双向绑定

前言
表单双向绑定简介
表单
- text
- textarea
- checkBox
- radio
选择框
修饰符
结束语

前言

今天我们来学习Vue.js基础命令使用的最后一个模块，下篇文章着重讲解组件区域。
话不多说，我们直接开始

表单双向绑定简介

本期内容主要围绕着input -> select 标签，本期围绕着实现方式以及代码示例讲解。
今天用到的指令是v-model 数据双向绑定命令，前面我们已经讲过相关用法了，不清楚的可以看看我前面的文章。

本次内容未涉及到方法或计算属性，以下绑定数据均在data内添加。

表单

text

基础用法，向input文本框绑定一条名为nextMsg的动态字符串数据。

                <input type="text" v-model="nextMsg" >
                <p>nextMsg: {{nextMsg}}</p>

textarea

基础用法，向textarea标签绑定一条名为nextLineMsg的动态字符串数据。


                <textarea v-model="nextLineMsg" cols="30" rows="10"></textarea>
                <p style="white-space: pre-line;">nextLineMsg: {{nextLineMsg}}</p>
                <br>

checkBox

多选框绑定内容略多，以代码与文字方式介绍。

向多选框绑定一条名为：nextCheckValue 动态数组数据。

                <!-- 复选框 and 单选框 
                    值得一提的是，复选框支持布尔以及数组
                    
                -->
                <input id="checkbox" type="checkbox" v-model="nextCheckBoxValue" value="Joke">

                <input id="checkbox" type="checkbox" v-model="nextCheckBoxValue" value="Rookie">
                
                <input id="checkbox" type="checkbox" v-model="nextCheckBoxValue" value="theShy">

                <p> args: {{nextCheckBoxValue}}</p>

向多选框绑定一条名为flag动态布尔数据

                <!-- 支持布尔类型 -->
                <input type="checkbox" v-model="flag" >
                <p>flag: {{flag}}</p>

多选框可支持根据点击情况返回相应的动态数据值，使用true-value and false-value

向多选框绑定一条color动态字符串数据

    <!-- checkBox true-value false-value  属性-->
    <input type="checkbox" v-model="color" true-value="红色" false-value="无色" name="colors">
    <p>color: {{color}}</p>

radio

向单选框绑定一条名为：sex 动态字符串数据

	                <!-- radio 单选框 -->
                <input type="radio" value="男" v-model="sex" name="sex" id="sex">
                <label for="sex">男</label>
                <input type="radio" value="女" v-model="sex" name="sex" id="sex2">
                <label for="sex2">女</label>
                <p>sex: {{sex}}</p>

向单选框绑定一条名为：radioColor动态字符串数据和red动态字符串数据并且参数值为红色

                <!-- radio 绑定动态数据属性 -->
                <input type="radio" v-model="radioColor" :value="red" name="color">
                <p>radioColor: {{radioColor}}</p>

与多选框的(true/false)-value 属性类似，不过这种方式是通过v-bind:value的方式进行动态数据绑定，最终值为radioColor = red的值。

选择框

使用双向绑定能够拿到select的值，具体讲解方式为代码与文本方式讲解。

向选择框绑定一条名为：selecColor的动态字符串数据

                <select v-model="selectColor">
                    <option value="" disabled >请选择</option>
                    <option>红色</option>
                    <option>蓝色</option>
                </select>
                <p>selectColor: {{selectColor}}</p>

为什么要加一条请选择呢？因为在select中如果没有一条初始的基础选项的话，默认会成空选择，所以我们需要加一条value为空值且不可被选择的选项。

向选择框渲染一条名为：colors的动态数组对象数据，并通过v-for渲染出来

                <!-- v-for渲染 -->
                <select v-model="selected">
                    <option v-for="(item,index) of colors" v-bind:key="item.name">{{index}} {{item.name}}</option>
                </select>
                <p>selected: {{selected}}</p>

修饰符

熟悉的修饰符又来啦，这次的三个修饰符比较简单，一般用于表单的数据处理。

trim(清理空格)
number(转化为数字)
lazy(在change事件后触发)

我们来看看使用方式小demo,定义三个动态字符串数据。

                <!-- lazy -->
                <div class="modifier_test">
                    <!-- chang事件之后 -->
                    <input v-model.lazy="lazyModifier">
                    <br>
                    <p>lazyModifier: {{lazyModifier}}</p>
                    <!-- number -->
                    <input v-model.number="numberModifier">
                    <br>
                    <p>numberModifier: {{numberModifier}}</p>
                    <!-- trim -->
                    <input v-model.trim="trimModifier">
                    <br>
                    <p>trimModifier: {{trimModifier}}</p>
                </div>

结束语

本人所有作品内容纯原创，转载需标明出处，否则必究！
对于Vue其他内容可以看看我的序章
感谢你的观看，帮到你的请给我点赞谢谢！
若有不足之处，欢迎评论区指出！

码农公寓