<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue双向数据绑定v-model</title>
</head>
<body>
    <div id="app">
        <h4>{{ title }}</h4>
        <p>input:{{ types.input }}</p>
        <p>checkbox:{{ types.checkbox }}</p>
        <p>radio:{{ types.radio }}</p>
        <p>remmber:{{ types.remmber }}</p>
        <p>select:{{ types.select }}</p>

        <hr>
        <h5>文本框</h5>
        <p><input type="text" :value="types.input"><span>单向数据绑定：v-bind</span></p>
        <p><input type="text" v-model="types.input"><span>双向数据绑定：v-model。默认绑定value属性</span></p>
        <p><input type="text" v-model.lazy="types.input"><span>双向数据绑定：v-model并添加修饰符lazy，vue将不在实时更新，而是会在输入框失去焦点，或按下enter之后更新。</span></p>

        <hr>
        <h5>多选框，checkbox</h5>
        <input type="checkbox" v-model="types.checkbox" value="1">读书 
        <input type="checkbox" v-model="types.checkbox" value="2">游泳
        <input type="checkbox" v-model="types.checkbox" value="3">打球
        <input type="checkbox" v-model="types.checkbox" value="4">钓鱼

        <hr>
        <h5>单选radio</h5>
        <p>
            <input type="radio" value="1" v-model="types.radio">时间
            <input type="radio" value="0" v-model="types.radio">会员
            <input type="radio" value="2" v-model="types.radio">生命
        </p>

        <hr>
        <h5>单选多选框</h5>
        <p>
            <input type="checkbox" v-model="types.remmber">记住我
        </p>

        <hr>
        <h5>下拉选择</h5>
        <select name="" id="" v-model="types.select">
            <option value="1" checked>读书</option>
            <option value="2">写字</option>
            <option value="3">跑步</option>
            <option value="4">打球</option>
            <option value="5">钓鱼</option>
        </select>

    </div>

    <script type="module">

        import {reactive,createApp} from './vue.esm-browser.js'

        createApp({
            
            setup(){

                let types = reactive({
                    //文本框默认
                    input:'cn.vuejs.org',
                    //多选框默认
                    checkbox:[],
                    //单选框默认
                    radio:0,
                    //单个多选框
                    remmber:false,
                    //下拉框
                    select:4
                })
                
                return {
                    title: 'vue双向数据绑定v-model',
                    types
                }
            }

        }).mount('#app')


    </script>
</body>
</html>

学习地址：https://www.bilibili.com/video/BV1nV411Q7RX?p=10&vd_source=ef3d1a56feb9e6a14f1d066d13b1deda
https://www.dengruicode.com/classes_content?uuid=aa7b1a3f72764703bb129016faebe0f4

标签: none

评论已关闭