双向绑定【笔记】

目录

    • 数据的双向绑定:
    • 代码dome:
    • 案例输出结果:

数据的双向绑定:

代码dome:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双向绑定title>
    
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js">script>
head>
<body>


<div id="app1">
    <label>性别:label>
    
    <input type="radio" name="sex" value="" v-model="sex"><input type="radio" name="sex" value="" v-model="sex"><hr>hr>
    
    选中了谁:{{ 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">
            
            <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>

案例输出结果:

双向绑定【笔记】_第1张图片

你可能感兴趣的:(vue,vue)