1.9Vue笔记v-model

最新推荐文章于 2024-10-06 14:15:37 发布

九今

最新推荐文章于 2024-10-06 14:15:37 发布

阅读量286

点赞数

分类专栏：笔记文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_51603531/article/details/122397689

版权

笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

v-model
双向绑定原理(包含两个操作）：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件
即：

<input type="text" v-model="message">
等同于
<input type"text" v-bind:value="message" v-on:input="message=$event.target.value">

v-model和radio结合使用

<body>
    <div id="app">
        <label for="man">
            <input type="radio" id="man" value='男' v-model='sex'>男
        </label>
        <label for="women">
            <input type="radio" id="women" value="女" v-model='sex'>女
        </label>
        <h2>你的选择是:{{sex}}</h2>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                sex: '男'
            }
        })
    </script>

</body>

v-model与checkbox

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

 <!-- v-model与复选框 -->
    <div id="app">
        <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'>张思王之
        <input type="checkbox" value="陈张太康" v-model='hobbies'>陈张太康
        <input type="checkbox" value="谷江山" v-model='hobbies'>谷江山

        <h2>海王的选择是：{{hobbies}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                isAgree: false,
                hobbies: [],

            }
        })
    </script>

在这里插入图片描述
v-model与select

 <!-- 选一个 -->
    <div id="app">
        <select name="fruit" v-model='fruit'>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="香梨">香梨</option>
            <option value="草莓">草莓</option>
            <option value="西瓜">西瓜</option>
        </select>
        <h2>你的选择是：{{fruit}}</h2>
    </div>

 <!-- 选多个 -->
    <div id="app">
        <select name="fruit" v-model='fruits' multiple>
            <option value="苹果">苹果</option>
            <option value="香蕉">香蕉</option>
            <option value="香梨">香梨</option>
            <option value="草莓">草莓</option>
            <option value="西瓜">西瓜</option>
        </select>
        <h2>你的选择是：{{fruits}}</h2>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                fruit: "苹果",
                fruits: [],
            }
        })
    </script>

在这里插入图片描述
值绑定

 <div id="app">
        <label v-for="item in pool" :for='item'>
            <input type="checkbox" :value="item" :id="item" v-model="pool1">{{item}}
        </label>
        <h2>您的选择是 ：{{pool1}}</h2>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                pool1: [],
                pool: ["胡良伟", '凌飞', '羊仔', '倒霉死勒', '赵成晨']
            }
        })
    </script>