文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue.js中v-model指令的用法介绍

2024-04-02 19:55

关注

一、v-model指令

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-->
    <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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯