vue_表单控件

Posted where there is a will, there i

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue_表单控件相关的知识，希望对你有一定的参考价值。

Vue.js中提供 v-model 的指令对表单元素进行双向数据绑定，在修改表单元素值的同时，实例 vm 中对应的属性值也同时更新，反之亦然。本小节介绍主要input元素绑定v-model 后的具体用法和处理方式，实例所依赖的js代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="lib/bootstrap.min.css">
  <script src="lib/jquery-1.7.2.js"></script>
  <script src="lib/bootstrap.js"></script>

  <script src="vue2.0.js"></script>
    <script src="vue-resource.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el : ‘.container‘,
                data : {
                    message:‘‘,
                    picked:‘Runoob‘,//radio 默认选择男
                    checked:‘‘,
                    multiChecked:[],
                    selected:‘A‘, //option 默认选择A
                    multiSelected:[]
                },
                methods:{
                    add:function(){
                        // alert(this);
                        //添加数据到数组里面

                        this.myData.push({
                            name : this.username,
                            age : this.age,
                        });
                        //添加完后清空input
                        this.username = ‘‘;
                        this.age = ‘‘;
                    },
                    deletMsg : function(n){
                        if(n == -2){
                            this.myData = [];
                        }else{
                            this.myData.splice(n,1);//删除某一条数据
                        }
                    }
                }
            });
        }
            
    </script>
</head>
<body>
    <div class="container">
        <form role="form">
            <div class="form-group">
                <h2>1. Text 输入框示例</h2>
                <input type="text"  class="form-control"  v-model="message">
                <span>Your input is : {{ message }}</span>
            </div>
            <div class="form-group">
                <h2>2. Radio 单选框示例</h2>
                <input type="radio" id="runoob" value="Runoob" v-model="picked">
                <label for="runoob">Runoob</label>
                <br>
                <input type="radio" id="google" value="Google" v-model="picked">
                <label for="google">Google</label>
                <br>
                <span>选中值为: {{ picked }}</span>
                <!-- picked值为选中的radio元素的value值 -->
            </div>
            <div class="form-group">
                <h2>3.Checkbox </h2>
                <h4>Checkbox 分两种情况：单个勾选和多个勾选框</h4>
                <h5>单个勾选框：v-model即为布尔值，此时input的value并不影响v-model的值</h5>
                <input type="checkbox" v-model="checked">
                <span>checked:{{ checked }}</span>
                <h5>多个勾选框：v-model使用相同的属性名称，此属性为数组</h5>
                <label for=""><input type="checkbox" value="1" v-model="multiChecked">1</label>
                <label for=""><input type="checkbox" value="2" v-model="multiChecked">2</label>
                <label for=""><input type="checkbox" value="3" v-model="multiChecked">3</label>
                <label for=""><input type="checkbox" value="4" v-model="multiChecked">4</label>
                <label for=""><input type="checkbox" value="5" v-model="multiChecked">5</label>
                <label for=""><input type="checkbox" value="6" v-model="multiChecked">6</label>
                <p>MultiChecked : {{ multiChecked.join(‘,‘) }}</p>
            </div>
            <div class="form-group">
                <h2>4. Select</h2>
                <h4>Select 分两种情况：单选和多选，多选的时候需要绑定到一个数组</h4>
                <h5>单选：</h5>
                <select name="" id="" v-model="selected">
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                </select>
                <span>Selected: {{ selected }}</span>
                <h5>多选：</h5>
                <select name="" id="" v-model="multiSelected" multiple>
                    <option value="A">A</option>
                    <option value="B">B</option>
                    <option value="C">C</option>
                    <option value="D">D</option>
                    <option value="E">E</option>
                    <option value="F">F</option>
                </select>
                <span>Selected: {{ multiSelected }}</span>
            </div>
        </form>
    </div>
</body>
</html>

 

以上是关于vue_表单控件的主要内容，如果未能解决你的问题，请参考以下文章

Day19_07_Vue教程之Vue表单输入

Vue.js-----轻量高效的MVVM框架（七表单控件绑定）

vue+Element表单验证之滚动条定位到校验未通过的表单控件的位置

Vue.js 表单控件绑定

html Vue表单控件绑定#tags：Vue

vue：ElementUI表格控件数据校验