双向绑定【笔记】

2021-05-31 11:33:12 阅读：159 来源： 互联网

数据的双向绑定：

代码dome：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定</title>
    <!--1.导入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
</head>
<body>

<!--1.view层 模板-->
<div id="app1">
    <label>性别：</label>
    <!--    v-model   数据双向绑定-->
    <input type="radio" name="sex" value="男" v-model="sex"> 男
    <input type="radio" name="sex" value="女" v-model="sex">女

    <hr></hr>
    <!--  输出data里面的sex值 ，因为用v-model双向绑定了sex-->
    选中了谁：{{ sex }}

    <hr>
    多选框：
    <input type="checkbox" name="type" value="足球" v-model="qiu">足球
    <input type="checkbox" name="type" value="篮球" v-model="qiu">篮球
    <input type="checkbox" name="type" value="排球" v-model="qiu">排球
    <input type="checkbox" name="type" value="羽毛球" v-model="qiu">羽毛球
    <hr>
    选中了谁：{{ qiu }}

    <hr></hr>
    <br>

    <label>
        <!-- 下拉框双向绑定自定义的属性-->
        <label>下拉框：</label>
        <select v-model="selected">
            <!-- 先把列表的数据遍历出来，然后进行选项绑定,把数据返回给selected-->
            <option v-for="option in optionsList" v-bind:value="option.value">{{ option.key }}</option>
        </select>
    </label>

    <!--输出选择的的数据-->
    <div id="output">
        选择的网站是: {{ selected }}
    </div>

</div>

<script>
    <!-- 2.model层 数据-->
    let vm = new Vue({
            el: "#app1",//绑定页面
            data: {
                message: "",
                sex: "",
                qiu: [],

                //选项列表
                optionsList:
                    [{key: '选择', value: 'Select'},
                        {key: '淘宝', value: 'taobao'},
                        {key: '京东', value: 'jingd'},
                        {key: '阿里巴巴', value: 'alibaba'},
                        {key: '亚马逊', value: 'amazon'},
                        {key: '苏宁', value: 'suning'},
                        {key: '拼多多', value: 'pinduoduo'}],

                selected: 'Select',

            }
        }
        )
    ;
</script>

</body>
</html>

案例输出结果：

标签：绑定,selected,value,sex,笔记,key,双向
来源： https://blog.csdn.net/lesliesuai/article/details/117412886

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

双向绑定【笔记】

目录

数据的双向绑定：

代码dome：

案例输出结果：