4. VUE中 v-model的使用

香菜大魔王(✪ω✪)

已于 2022-01-24 14:04:40 修改

阅读量751

点赞数 1

分类专栏： VUE2.0 文章标签： vue.js 前端框架

于 2022-01-21 17:22:26 首次发布

本文链接：https://blog.csdn.net/weixin_44020255/article/details/122619857

版权

VUE2.0 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1. v-model的基本使用

2. v-model修饰符的使用

3. v-model结合checkbox类型

4. v-model结合radio类型

5. v-model结合select类型

1. v-model的基本使用

<body>
    <div id="app">
        <!-- 双向绑定  方法1  -->
        <!-- <input type="text" v-model="message">{{message}} -->

        <!-- 双向绑定  方法2  -->
        <!-- <input type="text" :value="message" @input="valueChange(event)"> -->

        <!-- 方法2 简写 -->
        <input type="text" :value="message" @input="message = $event.target.value">
        <!-- event.target.value( ) 获取当前文本框的值（由事件触发时） -->

        <h2>{{message}}</h2>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app ',
            data: {
                message: '你好啊'
            },
            methods: {
                valueChange(event) {
                    this.message = event.target.value;
                }
            },
        })
    </script>
    <!-- v-model 其实是一个语法糖，它背后本质上是包含两个操作：
            1. v-bind 绑定一个 value 属性
            2. v-on 指令给当前元素绑定 input事件 -->
</body>

2. v-model修饰符的使用

<body>
    <div id="app">
        <!-- 1. 修饰符: lazy-->
        <!-- 敲回车或失去焦点 h2才会改变 -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!-- 2. 修饰符: number-->
        <!-- 转换为number类型 -->
        <!-- 默认情况下 v-model 给变量赋值时都是string类型 -->
        <input type="number" v-model.number="age">
        <h2>{{age}}-{{typeof age}}</h2>

        <!-- 3. 修饰符: trim-->
        <!-- 去除空格 -->
        <input type="text" v-model.trim='name'>
        <h2>您输入的名字：{{name}}</h2>
    </div>
    <script src="../js/vue.js "></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                age: 0,
                name: ''
            }
        })
        var age = 0
        age = '1111'
        age = '222'
    </script>

</body>

3. v-model结合checkbox类型

<body>
    <div id="app">
        <!--             1. checkbox 单选框              -->
        <!-- 
        <label for="agree">
            <input type="checkbox" id="agree" v-model="isAgree">同意协议
        </label>
        <h2>您选择的是：{{isAgree}}</h2>
        <button :disabled="!isAgree">下一步</button> -->

        <!--            2. checkbox 多选框             -->
        <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">羽毛球
        <h2>您的爱好是：{{hobbies}}</h2>


        <!-- 值绑定 -->
        <label v-for="item in originHobbies">
            <input type="checkbox" :value="item"v-model="hobbies">{{item}}
        </label>

    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '哈哈哈哈',
                isAgree: false, // 单选框 对应 布尔值
                hobbies: [], // 多选框 对应 数组
                originHobbies: ['篮球', '足球', '兵乓球', '羽毛球', '台球', '高尔夫球']

            }
        })
    </script>
</body>

4. v-model结合radio类型

<body>
    <div id="app">
        <!-- 保证name相同 可以互斥  -->
        <!-- 如果 v-model 绑定的同一个变量，也可以使她互斥，name就可以不要-->
        <label for="male">
        <input type="radio" id="male"  value="男" v-model="sex">男</label>
        <label for="female">
        <input type="radio" id="female" name="sex" value="女" v-model="sex">女</label>
        <h2>您选择的性别是：{{sex}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                sex: '女' //默认选择女  sex: '' 为空则默认都不选
            }
        })
    </script>
</body>

5. v-model结合select类型

<body>
    <div id="app">
        <!--          1.选择一个           -->
        <select name="abc" v-model="fruit">
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="榴莲">榴莲</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>您选择的水果是:{{fruit}}</h2>

        <!--          1.选择多个           -->
        <select name="abc" v-model="fruits" multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="榴莲">榴莲</option>
            <option value="葡萄">葡萄</option>
        </select>
        <h2>您选择的水果是:{{fruits}}</h2>

        <!-- 要按住ctrl键多选！！！！！！ -->
    </div>
    <script src="../js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                fruit: '苹果',
                fruits: []
            }
        })
    </script>

</body>

香菜大魔王(✪ω✪)

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
4. VUE中 v-model的使用

目录1.v-model的基本使用2.v-model修饰符的使用3.v-model结合checkbox类型4.v-model结合radio类型5.v-model结合select类型1.v-model的基本使用<body> <div id="app">  <!-- <input type="text" v-model="message...
复制链接

扫一扫