Vue基础篇（六）

作者: 缺月楼 | 来源:发表于2019-06-17 12:30 被阅读32次

本教程分为三部分：基础进阶实战，深入浅出Vue.js
基础篇持续更新中........

第六章表单与v-model

基本用法：

------- v-model:

Vue提供了v-model指令，用于在表单类元素上双向绑定事件
一个小栗子

<div id="app">
        v-model:用法
        <input type="text" v-model='value'>
        <br> {{value}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: ''
            }
        })
    </script>

效果图：

效果图
input和textarea
可以用于input框，以及textarea等
注意：所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value

 <div id="app">
        v-model:用法
        <input type="text" v-model='value'>
        <br> {{value}}
        <br>
        <hr>
<!-- 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的`value` -->
        <textarea name="" id="" cols="30" rows="10" v-model='msg'>我是多行文本的初始化值</textarea>
        <br> {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: ''
            }
        })
    </script>

单选按钮：

单个单选按钮，直接用v-bind绑定一个布尔值，用v-model是不可以的
如果是组合使用，就需要v-model来配合value使用，绑定选中的单选框的value值，此处所绑定的初始值可以随意给.
举个小栗子：

<div id="app">
        v-model:用法
        <input type="text" v-model='value'>
        <br> {{value}}
        <br>
        <hr>
        <!-- 所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的`value` -->
        <textarea name="" id="" cols="30" rows="2" v-model='msg'>我是多行文本的初始化值</textarea>
        <br> {{msg}}
        <hr>
        <br> 单选框：
        <br> 单个单选框 ：<input type="radio" v-bind:checked='oneradio'>
        <br>
        <hr> 多个单选框
        <br> 狗蛋： <input type="radio" name="checks" value='狗蛋' v-model='checkname'><br> 毛蛋： <input type="radio" name="checks" value='毛蛋' v-model='checkname'><br> 翠花：<input type="radio" name="checks" value='翠花' v-model='checkname'>
        <br>现在选中的是--------->{{checkname}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: '',
                oneradio: false,
                //想要初始化选中  就赋值一个 input中的 value  不赋值就都不选 随便
                checkname: '毛蛋'
            }
        })
    </script>

复选框：

单个复选框，直接用定一个布尔值，可以用v-model可以用v-bind
2.多个复选框– 如果是组合使用，就需要v-model来配合value使用，v-model绑定一个数组—如果绑定的是字符串，则会转化为true/false，与所有绑定的复选框的
checked属性相对应.
举个栗子：

 <div id="app">
        <br> 单选框：
        <!-- 注意此处用v-model不生效 <input type="radio" v-model='oneradio'>-->
        <br> 单个单选框 ----v-bind：<input type="radio" v-bind:checked='oneradio'>
        <br>
        <hr> 多个单选框
        <br> 狗蛋： <input type="radio" name="checks" value='狗蛋' v-model='checkname'><br> 毛蛋： <input type="radio" name="checks" value='毛蛋' v-model='checkname'><br> 翠花：<input type="radio" name="checks" value='翠花' v-model='checkname'>
        <br>现在选中的是--------->{{checkname}}
        <br>
        <hr> 复选框：
        <br>单个复选框-----v-bind
        <input type="checkbox" v-bind:checked='oneradio'>
        <br> 单个复选框-----v-model
        <input type="checkbox" v-model='oneradio'>
        <hr><br> 多个复选框：
        <br> 毛蛋：
        <input type="checkbox" value="毛蛋" v-model='checks'>
        <br> 狗蛋：
        <input type="checkbox" value="狗蛋" v-model='checks'>
        <br> 翠花：
        <input type="checkbox" value="翠花" v-model='checks'>
        <br>现在选中的是---------{{checks}}

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: { 
                oneradio: false,
                //想要初始化选中  就赋值一个 input中的 value  不赋值就都不选 随便
                checkname: '毛蛋',
                //如果只字符串就默认转化为true/false
                checks: []
            }
        })
    </script>

下拉框：

如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值
如果是多选，就需要vmodel来配合value使用，v-model绑定一个数组，与复选框类似
v-model一定是绑定在select标签上

  <div id="app">
      单选的下拉框：
        <select name="" id="" v-model="selectde">
            <option value="狗蛋">狗蛋</option>
            <option value="毛蛋">毛蛋</option>
            <option value="翠花">翠花</option>
        </select>
        <br> 現在選中的是：{{selectde}}
        <hr> 多选的下拉框：
        <select name="" id="" v-model="selectdenull" multiple>
            <option value="狗蛋">狗蛋</option>
            <option value="毛蛋">毛蛋</option>
            <option value="翠花">翠花</option>
        </select>
        <br> 現在選中的是：{{selectdenull}}

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                // 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优 先匹配一个value值， 没有value就匹配一个text值
                selectde: [],
                selectdenull: ''
            }
        })
    </script>

小结一下：如果是单选，初始化最好给定字符串，因为v-model此时绑定的是静态字符串或者布尔值，如果是多选，初始化最好给定一个数组.

绑定值

单选按钮
只需要用v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值
复选框
下拉框
在select标签上绑定value值对option并没有影响
看例子

 <div id="app" style="margin-bottom: 100px">
        绑定值：
        <br> 单选按钮 ：
        <!-- 只需要用vbind给单个单选框绑定一个value值，此时，vmodel绑定的就是他的value值 -->
        <input type="radio" v-model="picked" v-bind:value='value'>-------{{picked}}
        <br>-------------------------------------- <br> 多选按钮：需求 选中不选中的value不一样
        <input type="checkbox" v-model="toggle" :true-value="value1" :false-value="value2">
        <br> {{toggle}}
        <br> 被选中：-{{toggle == value1}}
        <br> 位被选中：--{{toggle == value2}}
        <br>--------------------------------------<br> 下拉框：
        <select v-model='valueselect'>
            <option :value="{num:111}">狗蛋</option>
        </select>--------------现在选中的是{{typeof valueselect}} {{valueselect.num}}
        <br>--------------------------------------<br> 修饰符
        <input type="text" v-model="inputStr"> <br>---------{{inputStr}}
        <br>
        <input type="text" v-model.lazy="inputStr"> <br>---------{{inputStr}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: '',
                msg: '',
                oneradio: false,
                //想要初始化选中  就赋值一个 input中的 value  不赋值就都不选 随便
                checkname: '毛蛋',
                //如果只字符串就默认转化为true/false
                checks: [],
                // 如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优 先匹配一个value值， 没有value就匹配一个text值
                selectde: '',
                selectdenull: [],
                //单选按钮绑定v-model是不行的
                picked: true,
                value: 1111,
                toggle: true,
                value1: '我被选中',
                value2: '位被选中',
                valueselect: '',
                inputStr: ' '

            }
        })
    </script>

修饰符

lazy

——v-model默认是在input输入时实时同步输入框的数据，而lazy修饰符，可以使其在失去焦点或者敲回车键之后在更新

number

—————— 将输入的字符串转化为number类型

trim
*trim自动过滤输入过程中收尾输入的空格
看栗子：

<div id="app" style="margin-bottom: 100px">
     修饰符
        <input type="text" v-model="inputStr"> <br>---------{{inputStr}}
        <br> lazy:
        <input type="text" v-model.lazy="inputStr"> <br>---------{{inputStr}}
        <br> number : <br>
        <input type="text" v-model.number="isnum"> <br>---------{{typeof isnum}}
        <br> trim : <br>
        <input type="text" v-model="trimStr"> <br>---------{{trimStr.split('').length}}
        <!-- 加上修饰符对比一下 --><br>
        <input type="text" v-model.trim="trimStr1"> <br>---------{{trimStr1.split('').length}}


    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                inputStr: ' ',
                isnum: '',
                trimStr: '',
                trimStr1: ''

            }
        })
    </script>

Vue基础篇（六）

第六章表单与v-model

基本用法：

------- v-model:

单选按钮：

复选框：

下拉框：

绑定值

修饰符

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue

Vue基础篇（六）

第六章 表单与v­-model

基本用法：

------- v-­model:

单选按钮：

复选框：

下拉框：

绑定值

修饰符

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Vue

第六章表单与v-model

------- v-model: