Vue之v-model

最新推荐文章于 2024-08-05 18:19:35 发布

2021_fc

最新推荐文章于 2024-08-05 18:19:35 发布

阅读量185

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_45310564/article/details/120072215

版权

Vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-model的基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">{{message}}
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-model的原理

v-model其实是一个语法糖，它的本质是包含了两个操作

v-bind绑定一个value属性
v-on指令给当前元素绑定input事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" :value="message" @input="mesChange">
        <input type="text" :value="message" @input="message = $event.target.value">
        <span>{{message}}</span>
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
            },
            methods:{
                mesChange(event){
                    this.message = event.target.value
                }
            }
        })
    </script>
</body>
</html>

v-model结合radio使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <label for="male">
            <input type="radio" id="male" name="sex" value="男" v-model="sex">男
        </label>
        <label for="female">
            <input type="radio" id="female" name="sex" value="女" v-model="sex">女
        </label>
        <div>选择的性别是：{{sex}}</div>
    </div>
    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
                sex:'男'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-model结合checkbox使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 单选框 -->
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <div>{{isAgree}}</div>
        <button :disabled="!isAgree">下一步</button>

        <br>

        <!-- 多选框 -->
        <div>
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
            <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        </div>
        <h2>您的爱好是：{{hobbies}}</h2>
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                isAgree:false,
                hobbies:[]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

v-model结合select使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 选择一个 -->
        <select v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="梨">梨</option>
            <option value="香蕉">香蕉</option>
            <option value="西瓜">西瓜</option>
            <option value="芒果">芒果</option>
            <option value="哈密哈">哈密哈</option>
        </select>
        <h2>您选择的水果是：{{fruit}}</h2>
        <!-- 选择多个 -->
        <select v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="梨">梨</option>
            <option value="香蕉">香蕉</option>
            <option value="西瓜">西瓜</option>
            <option value="芒果">芒果</option>
            <option value="哈密哈">哈密哈</option>
        </select>
        <h2>您选择的水果是：{{fruits}}</h2>
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                fruit:'苹果',
                fruits:[]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

值绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- <div>
            <input type="checkbox" value="篮球" v-model="hobbies">篮球
            <input type="checkbox" value="足球" v-model="hobbies">足球
            <input type="checkbox" value="乒乓球" v-model="hobbies">乒乓球
            <input type="checkbox" value="羽毛球" v-model="hobbies">羽毛球
        </div>
        <h2>您的爱好是：{{hobbies}}</h2> -->

        <!-- 值绑定 -->
        <label v-for="item in values" :for="item">
            <input type="checkbox" :value="item" :id="item" v-model="hobbies">{{item}}
        </label>
        <h2>您的爱好是：{{hobbies}}</h2>
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                hobbies:[],
                values:["篮球","足球","乒乓球","羽毛球"]
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

在真实开发中，这些input的值可能都是从网络获取的在data中。

所以我们可以通过v-bind:value动态给value赋值

v-model 修饰符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 修饰符：lazy 失去焦点绑定 -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!-- 修饰符：number 可以将string类型转换为number-->
        <input type="text" v-model.number="age">
        <h2>{{typeof age}}</h2>

        <!-- 修饰符 trim  -->
        <input type="text" v-model.trim="name">
        <h2>{{name}}</h2>
    </div>

    <script>
        const app = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
                age:'',
                name:''
            }
        })
    </script>
</body>
</html>

2021_fc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue之v-model

v-model的基本使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <script src="../../js/vue.js"></script></head><body> <div id="app"> <input type="text" v-model="messa
复制链接

扫一扫

专栏目录