正文

Vue.js常用指令：v-model

admin
admin V管理员 /0 评论 /240 阅读
0110
此篇文章发布距今已超过683天，您需要注意文章的内容或图片是否可用！

v-model 用来获取表单元素的值。对应input输入框获取的是输入的值，单选按钮、复选框、下拉框获取的是选择的状态。

使用v-model可以在表单控件或者组件上创建双向绑定。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model指令</title>
    <!--引入vue.js" title="vue.js">vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
       window.onload=function(){
           // 构建vue实例
           new Vue({
               el:"#my",
               data:{
                 inputValue:"hello world",
                 chkState:true, //默认为true
                 chkArray:["1"], //处理成组的复选框需要定义一个数组，对应每个CheckBox的value值,这里默认第二个选中
                 chkLists:[{displayName:"科普读物",value:"0"},
                           {displayName:"中小学教材",value:"1"},
                           {displayName:"计算机科学",value:"2"}],
                 rdoCheck:"1",
                 // 动态处理radio
                 radioLists:[{name:"Gender",value:"1",displayName:"男"},
                             {name:"Gender",value:"2",displayName:"女"}],
                 sectionValue:"香蕉", // 没有value值，默认值就是name的值
                 sectionValue1:"0",
                 optionLists:[{value:"0",displayName:"苹果"},
                             {value:"1",displayName:"香蕉"},
                             {value:"2",displayName:"葡萄"}]
               },
               // 方法
               methods:{
               },
               filters:{
                   toShowCheckBoxState:function(value){
                       return value==true?"选中":"未选中"
                   }
               }
           })
       }
    </script>
</head>
<body>
    <div id="my">
       <!--表单输入框 当inputValue的值为123的时候禁止输入-->
       <input type="text" v-model="inputValue" :disabled="inputValue==123">{{inputValue}}
       <!--复选框  v-model 当前的状态:true或者false-->
       <div>
           <input type="checkbox" v-model="chkState">当前选中状态:{{chkState | toShowCheckBoxState}}
       </div>
        <!--多个复选框 组  静态显示-->
        <div>
            <input type="checkbox" v-model="chkArray" value="0">唱歌
            <input type="checkbox" v-model="chkArray" value="1">跳舞
            <input type="checkbox" v-model="chkArray" value="2">打篮球
            <p>当前选中的value值:{{chkArray}}</p>
        </div>
        <!--复选框 动态显示-->
        <div>
            <ul>
                <li v-for="list in chkLists">
                    <input type="checkbox" v-model="chkArray" :value="list.value">{{list.displayName}}
                </li>
            </ul>
        </div>
        <!--单选框 静态显示 -->
        <div>
            <input type="radio" v-model="rdoCheck" name="Gender" value="1">男
            <input type="radio" v-model="rdoCheck" name="Gender" value="2">女
            <p>{{rdoCheck}}</p>
        </div>
         <!--单选框 动态显示-->
         <div>
             <ul>
                 <li v-for="list in radioLists">
                    <input type="radio" v-model="rdoCheck" :name="list.name" :value="list.value">{{list.displayName}}
                 </li>
             </ul>
            <p>{{rdoCheck}}</p>
        </div>
        <!--下拉框 静态显示 -->
        <div>
            <select v-model="sectionValue">
                <option>苹果</option>
                <option>香蕉</option>
                <option>葡萄</option>
            </select>
            <p>{{sectionValue}}</p>
        </div>
        <!--下拉框 静态显示 -->
        <div>
            <select v-model="sectionValue1">
                <option value="0">苹果</option>
                <option value="1">香蕉</option>
                <option value="2">葡萄</option>
            </select>
            <p>{{sectionValue1}}</p>
        </div>
        <!--下拉框 静态显示 -->
        <div>
            <select v-model="sectionValue1">
                <option v-for="list in optionLists" :value="list.value">{{list.displayName}}</option>
            </select>
            <p>{{sectionValue1}}</p>
        </div>
    </div>
</body>
</html>

二、v-model指令实例

下面代码利用v-model指令实现全选的功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>v-model指令</title>
    <!--引入vue.js-->
    <script src="node_modules/vue/dist/vue.js" ></script>
    <script>
        window.onload = function(){
    var vm =new Vue({
        el:'#my',
        data:{
            checkAll: {name:'全选',check:false},
            lists:[{name:'小米',check:true},
                    {name:'华为',check:false},
                    {name:'苹果',check:false},
                    {name:'中兴',check:false},
                    {name:'OPPO',check:false}]
        },
        methods: {
            checkAllChange:function(){
                vm.lists.forEach(function(item){
                    item.check = vm.checkAll.check;
                });
            },
            curChange:function(){
                //true的状态
                var curTure = this.lists.filter(function(item){
                    return item.check ==true;
                });
                curTure.length == this.lists.length ? this.checkAll.check = true : this.checkAll.check = false ;
            }
        }
    })
}
    </script>
</head>
<body>
    <div id='my'>
        <input type="checkbox" v-model="checkAll.check" @change="checkAllChange()">
        <label>{{checkAll.name}} {{checkAll.check}}</label>
        <ul>
            <li v-for="list in lists">
                <input type="checkbox" v-model="list.check"  @change="curChange()">
                <label>{{list.name}} {{list.check}}</label>
            </li>
        </ul>
    </div>
</body>
</html>

ZhouSa.com