vue.js实战学习——表单与v-model

Posted 2020-10-19 sxdct

注：此内容摘抄自：梁灏的《Vue.js实战》

注：记得要引入vue.js才能运行哦，文章中贴出的代码直接复制是不行的，html css js 都放在了一起，而且也没有引用vue.js。

基本用法

1.表单控件在实际业务较为常见，比如单选、多选、下拉选择、输入框等，用他们可以完成数据的录入、校验、提交等。Vue.js提供了v-model指令，用于在表单类元素上的双向绑定数据。

<div class="app1">
    <input type="text" v-model="message" placeholder="输入..." />
    <p>输入的内容是：{{message}}</p>
</div>

var app1=new Vue({
    el:‘.app1‘,
    data:{
        message:‘‘
    }
});

对于文本域textarea也是同样的用法。

2.使用v-model时，如果是用中文输入法输入中文，一般在没有选定词组前，也就是在拼音阶段，Vue是不会更新数据的，当敲下汉字时才会触发更新。如果希望总是实时更新，可以用@input代替v-model。事实上，v-model也是一个特殊的语法糖，只不过它会在不同的表单上智能处理。

<div class="app2">
    <input type="text" @input="handleInput" placeholder="输入..." />
    <p>输入的内容是：{{message}}</p>
</div>

var app2=new Vue({
    el:‘.app2‘,
    data:{
        message:‘‘
    },
    methods:{
        handleInput:function(e){
            this.message=e.target.value;
        }
    }
});

3.单选按钮

单选按钮在单独使用时，不需要v-model，直接使用v-bind绑定一个布尔类型的值，为真时选中，为假时不选。

<div class="app3">
    <input type="radio" name="" id="button1" value="" :checked="picked" />
    <label for="button1">单选按钮</label>
</div>

var app3=new Vue({
    el:‘.app3‘,
    data:{
        picked:true
    }
});

如果是组合使用来实现互斥选择效果，就需要v-model配合value来使用：

<div class="app4">
    <input type="radio" name="" id="html" value="html" v-model="picked" />
    <label for="html">HTML</label>
    <br />
    <input type="radio" name="" id="js" value="js" v-model="picked" />
    <label for="js">JS</label>
    <br />
    <input type="radio" name="" id="css" value="css" v-model="picked" />
    <label for="css">CSS</label>
    <br />
    <p>选择的项是：{{picked}}</p>
</div>

var app4=new Vue({
    el:‘.app4‘,
    data:{
        picked:‘js‘
    }
});

4.复选框

复选框也分单独使用和组合使用，不过用法稍与单选不同。复选框单独使用时，也是用v-model来绑定一个布尔值。

<div class="app5">
    <input type="checkbox" name="checked" id="checked" value="" v-model="checked" />
    <label for="checked">选择状态：{{checked}}</label>
</div>

var app5=new Vue({
    el:‘.app5‘,
    data:{
        checked:false
    }
});

组合使用时，也是v-model与value一起，多个勾选框都绑定到同一个数组类型的数据，value的值在数组当中，就会选中这一项。这个过程也是双向的，在勾选时，value的值也会自动push到这个数组中：

<div class="app6">
    <input type="checkbox" name="" id="html" value="html" v-model="checked" />
    <label for="html">HTML</label>
    <br />
    <input type="checkbox" name="" id="js" value="js" v-model="checked" />
    <label for="js">JS</label>
    <br />
    <input type="checkbox" name="" id="css" value="css" v-model="checked" />
    <label for="css">CSS</label>
    <br />
    <p>选择的项是：{{checked}}</p>
</div>

var app6=new Vue({
    el:‘.app6‘,
    data:{
        checked:[‘html‘,‘css‘]
    }
});

5.选择列表

选择列表局势下拉选择器，也是常见的表单控件，同样也分为单选和多选两种方式。

<div class="app7">
    <select name="" v-model="selected">
        <option>html</option>
        <option value="js">JS</option>
        <option>CSS</option>
    </select>
    <p>选择的项是：{{selected}}</p>
</div>

var app7=new Vue({
    el:‘.app7‘,
    data:{
        selected:‘html‘
    }
});

<option>是备选项，如果含有value属性，v-model就会优先匹配value的值；如果没有，就会直接匹配<option>的text，比如选中第二项时，selected的值是js而不是JS。

给<selected>添加属性multiple就可以多选了，此时v-model绑定的是一个数组，与复选框用法类似。（本人觉得太丑了，就不列举了。而且好像只有一开始默认值是多选，然后自己再点击就是单选了）

在业务中，<option>经常用v-for动态输出，value和text也是用v-bind来动态输出的。

<div class="app9">
    <select name="" v-model="selected">
        <option v-for="option in options" :value="option.value">{{option.text}}</option>
    </select>
    <p>选择的项是：{{selected}}</p>
</div>

var app9=new Vue({
    el:‘.app9‘,
    data:{
        selected:‘html‘,
        options:[
            {
                text:‘HTML‘,
                value:‘html‘
            },
            {
                text:‘javascript‘,
                value:‘js‘
            },
            {
                text:‘CSS‘,
                value:‘css‘
            }
        ]
    }
})

虽然用选择列表<select>控件可以很简单的完成下拉选择的需求，但是在实际业务中反而不常用，因为它的样式依赖平台和浏览器，无法统一，也不太美观，功能也有限，比如不支持搜索，所以常见的解决方案是用div模拟一个类似的控件。