前端 Vue框架学习实例（八）

最新推荐文章于 2022-11-25 18:52:46 发布

自足的猿

最新推荐文章于 2022-11-25 18:52:46 发布

阅读量104

点赞数

分类专栏： Vue学习文章标签： checkbox vue

本文链接：https://blog.csdn.net/zhshuzi/article/details/118684533

版权

Vue学习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中v-model的使用，包括基本的双向数据绑定，以及修饰符.lazy、.number和.trim的用法。通过实例展示了v-model在单选框、复选框及select元素中的应用，帮助读者深入理解v-model的灵活性和实用性。

摘要由CSDN通过智能技术生成

1.v-model双向绑定的基本使用

在表单控件或者组件上创建双向绑定

<body>
    <div id="app">
        <!-- <input type="text" v-model="message"> -->
        <input type="text" v-bind:value="message" v-on:input="valueChange">
        <h2>{{message}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好'
            },
            methods: {
                valueChange(event) {
                    this.message = event.target.value
                }
            }
        })
    </script>
</body>

2.v-model中修饰符的使用

.lazy 。在事件触发之后再与值同步
.number。可以将输入的字符串转换为数字
.trim。自动过滤输入值首尾的空格

<body>
    <div id="app">
        <!-- 1.修饰符：lazy -->
        <input type="text" v-model.lazy="message">
        <h2>{{message}}</h2>

        <!-- 2.修饰符：number -->
        <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>
        const app = new Vue({
            el: '#app',
            data: {
                message: '你好啊',
                age: 0,
                name: ''
            }
        })
    </script>
</body>

3.v-model与单选框的使用

<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>
        <h2>您选中的性别是：{{sex}}</h2>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                sex: ''
            }
        })
    </script>
</body>

4.v-model与checkbox的使用

<body>
    <div id="app">

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

        <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>
    </div>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isAgree: false,
                hobbies: []
            }
        })
    </script>

</body>

5.v-model与select类型的使用

<body>
    <div id="app">
        <!-- ----------------单选框-------------------- -->
        <select name="abc" id="" v-model="fruit">
           <option value="苹果" >苹果</option>
           <option value="香蕉" >香蕉</option>
           <option value="菠萝" >菠萝</option>
           <option value="葡萄" >葡萄</option>
       </select>
        <h2>您选择的水果是：{{fruit}}</h2>


        <hr>
        <!-- ----------------多选框-------------------- -->
        <select name="abc" id="" v-model="fruits" multiple>
            <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>