v-model原理，在“radio”、“checkbox”、“select”、修饰符

最新推荐文章于 2024-04-09 14:48:57 发布

yorup

最新推荐文章于 2024-04-09 14:48:57 发布

阅读量905

点赞数

文章标签：前端 vue.js html 开发语言

本文链接：https://blog.csdn.net/m0_48639378/article/details/126140665

版权

v-model基本原理

v-mode在单选框“radio”的使用

v-mode在复选框“checkbox”的使用

v-mode在复选框的多选使用

v-mode在select的使用

v-model的修饰符

v-model基本原理

首先，介绍一个函数oninput()，即只要在input中输入内容就会触发

v-model的基本原理就是基于oninput，这里用v-on简写的方式绑定“input”=> @input = 'change '，为了实现数据由页面和data数据库的双向流动，将input的value属性动态绑定=> :value='msg'

,change()函数没有调用之前，只能实现单向动态数据绑定=> 数据从data数据库流向页面，change()目的是为了实现页面数据流向data数据库。进而实现数据的双向流动。

change(e)是为了接受input输入的值，e是input，通过e.target.value获取输入的值。

<body>
    <div id="app">
        <label for="acount">账号</label>
        <input type="text" id="acount" :value="msg" @input="change">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            data() {
                return {
                    msg: '无名的人'
                }
            },
            methods: {
                change(e){
                    console.log(1);
                    this.msg = e.target.value;
                }
            }
        });
    </script>
</body>

使用v-model实现数据的双向流动，与上面实例相同，仅仅是直接用一个v-model就可以了，默认传递input的value。

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <input type="text" v-model="msg">
        <h2>{{msg}}</h2>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data(){
                return{
                    msg:'无名之辈'
                }
            }
        })
    </script>

v-mode在单选框“radio”的使用

直接使用v-model是不行的，因为单选框没有value值，如果输出value是null。解决办法是我们在写的时候加一个value值，使得能让v-model成功传递。这里给了一个初始值=“男”，没有什么影响。同时-model还自带排他属性，不会使得两个单选框同时选中。

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <label for="male">
            <input type="radio" value="男" v-model="sex" id="male">男
        </label>
        <label for="female">
            <input type="radio"  value="女" id="female" v-model="sex">女
        </label>
        <h2>您选择的性别是：{{sex}}</h2>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data(){
                return{
                    sex: '男'
                }
            }
        })
    </script>

v-mode在复选框“checkbox”的使用

checkbox复选框传递给v-model的值时true或false，勾选或取消复选框true或false从页面流向data数据库，data中isagree的值改变（此时监听事件也生效，打印值），isagree的值又流向页面，页面动态绑定了button中的disabled，实现button的可用和禁用。

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <label for="agree">
            <input type="checkbox" name="" id="agree" v-model="isagree">
            同意协议
        </label>
        <div style="margin: 10px 0 0 0;">
            <button :disabled = '!isagree'>下一步</button>
        </div>
    </div>
    <script>
        let vm = new Vue({
        el: '#app',
        data(){
            return{
                isagree: false
            }
        },
        //监听一下isagree值的改变情况
        watch:{
            isagree(n){
                console.log(n);
            }
        }
    })
    </script>

v-mode在复选框的多选使用

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <label for="item" v-for="(item,index) in hobbies" :key="item">
            <input type="checkbox"  :id="item" :value="item" v-model="hhobbies">{{item}}
        </label>
        <h2>{{hhobbies}}</h2>
    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data(){
                return{
                    hhobbies:[],
                    hobbies: ["篮球", "足球", "乒乓球", "羽毛球"],
                }
            }
        })
    </script>

v-mode在select的使用

这里v-model传递的值是option的value

    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <div id="app">
        <select name="" v-model="fruit">
            <option value="香蕉">香蕉</option>
            <option value="苹果">苹果</option>
            <option value="橘子">橘子</option>
        </select>
       <h2>您选择的水果是：{{fruit}}</h2>

    </div>
    <script>
        let vm = new Vue({
            el: '#app',
            data(){
                return{
                    fruit:'香蕉',
                }
            }
        })
    </script>

v-model的修饰符

lazy：默认情况下是实时更新数据，加上lazy，从输入框失去焦点，按下enter都会更新数据。

number：默认是string类型，使用number复制为number类型。

trim：用于自动过滤用户输入的首尾空白字符。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
              <input type="text" v-model.lazy="message" />
			  <h2>{{message}}</h2>
			  <input type="text" v-model.number="age" />
			  <h2>{{age}}---{{typeof age}}</h2>
			  
			  <input type="text" v-model.trim="name" />
			  <h2>{{name}}</h2>
		</div>
		<script>
			const vm = new Vue({
				el: '#app',
				data() {
					return {
						message: "zzz",
						age: 18,
						name: "ttt"
					}
				}

			})
		</script>
	</body>
</html>