vue.js---表单与v-model

2019-08-08 本文已影响4人学的会的前端

基本用法

VUE提供了v-model指令，用于在表单类元素上双向绑定事件

input和textarea

可以用于input框，以及textarea等

注意：所显示的值只依赖于所绑定的数据，不再关心初始化时的插入的value.

代码示例：

<body>
<div id = "app">
    v-model的input框用法：<br/>
    <input type = "text" v-model = "value"><br>
    {{value}}
    <hr/>
    v-model的textarea框的用法：<br/>
    绑定了v-model，初始化的指不会显示
    <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>
</body>

单选按钮

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

3.代码示例：

<body>
<div id = "app">
    单选框：<hr/>
    单个单选框:<br/>
    oneradio为true,默认选中单选框。
    <input type = "radio" name = "" v-bind:checked = "oneradio"><hr/>
    多个单选框：<br/>
    跑步：<input type = "radio" name = "checks" value = "跑步" v-model = "checkName">
    游泳：<input type = "radio" name = "checks" value = "游泳" v-model = "checkName">
    射击：<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: {
            oneradio: true,
            checkName: '跑步' //初始值
        }
    })
</script>
</body>

复选框

单个复选框，直接用定一个布尔值，可以用v-model可以用v-bind
多个复选框– 如果是组合使用，就需要v-model来配合value使用，v-model绑定一
个数组—如果绑定的是字符串，则会转化为true，false，与所有绑定的复选框的checked属性相对应。
若绑定的是一个数组，则会把value存放在数组中。
代码示例

<body>
<div id = "app">
    单个复选框：<br/>
    v-bind:<input type = "checkbox" v-bind:checked = "onecheckbox"><br/>
    v-model:<input type = "checkbox" v-model = "onecheckbox">
    <hr>
    多个复选框:<br/>
    跑步：<input type = "checkbox" value = "跑步" v-model = "checks">
    游泳：<input type = "checkbox" value = "游泳" v-model = "checks">
    射击：<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: {
          onecheckbox: true,
            checks: [] //此处为数组和字符串的渲染是不一样的。
        }
    })
</script>
</body>

下拉框

如果是单选，所绑定的value值初始化可以为数组，也可以为字符串，有value直接优先匹配一个value值，没有value就匹配一个text值。但是value的值不会存放在数组中，而是转换成字符串。
如果是多选，就需要v-model来配合value使用，v-model绑定一个数组，与复选框类似，value的值会存放在数组里。
v-model一定是绑定在select标签上
代码示例

<body>
<div id = "app">
    单选的下拉框：
    <select v-model = "selected">
        <option value = "跑步">跑步</option>
        <option value = "游泳">游泳</option>
        <option value = "射击">射击</option>
    </select>
    <!-------现在选中的是 {{selected}}-->
    <hr/>
    多选的下拉框：
    <select v-model = "selected" multiple>
        <option value = "跑步">跑步</option>
        <option value = "游泳">游泳</option>
        <option value = "射击">射击</option>
    </select>
    -------现在选中的是 {{selected}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
          selected: []
        }
    })
</script>
</body>

总结：

如果是单选，初始化最好给定字符串，因为vmodel此时绑定的是静态字符串或者布尔值
如果是多选，初始化最好给定一个数组

绑定值

单选按钮

单选按钮：只需要用v-bind给单个单选框绑定一个value值，此时，v-model绑定的就是他的value值.
<input type = "radio" v-model = "picked" v-bind:value = "value">------{{picked}}

复选框

<input type = "checkbox" v-model = "toggle" :true-value = "value1" :false-value = "value2">

下拉框

在select标签上绑定value值对option并没有影响.value绑在select和option上的结果是不一样的。

代码示例

<body>
<div id = "app">
    绑定值--单选按钮：<br/>
    <input type = "radio" v-model = "picked" v-bind:value = "value">------{{picked}}
    <hr/>
    绑定值--复选框按钮：（选中和不选中的Value不一样）<br/>
    <input type = "checkbox" v-model = "toggle" :true-value = "value1" :false-value = "value2">
    --------------{{toggle}}<br/>
    被选中--------------{{toggle == value1}}<br/>
    未被选中--------------{{toggle == value2}}
    <hr>
    绑定值--下拉框：<br/>
    <select v-model = "selected" :value = "{num:111}">
        <option value = "跑步">跑步</option>
        
    </select>
    -------现在选中的是 {{typeof selected}} --- {{selected}}
<!--
<select v-model = "selected" }">
        <option :value = "{num:111}">跑步</option>    
</select>
    -------现在选中的是 {{typeof selected}} --- {{selected.num}
-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
          picked: true,
            value: '111',
            toggle: true,
            value1: '我被选中了',
            value2: '我没有被选中',
            selected: ''
        }
    })
</script>
</body>

修饰符

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

<input type = "text" v-model.lazy = "inputstr"> ----{{inputstr}}

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

<input type = "text" v-model.number = "isNumber">----{{ typeof isNumber}}

trim
trim自动过滤输入过程中首尾输入的空格

<input type = "text" v-model.trim = "trimStr">----------{{trimStr.split('').length}}

vue.js---表单与v-model

基本用法

input和textarea

单选按钮

复选框

下拉框

总结：

绑定值

单选按钮

复选框

下拉框

代码示例

修饰符

猜你喜欢

热点阅读