SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
<!DOCTYPE> 
<html lang="ZH-cn">
	<head>
		<meta charset="utf-8" >
		<title>标题</title>
		<meta name="keywords" content="关键字" />
		<meta name="description" content="内容描述" />
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
        <!-- v-model input -->
		<div id="app">
            <input type="text" v-model="message1">
            <h2>{{message1}}</h2>
            <textarea v-model="message2"></textarea>
            <p>输入的内容是：{{message2}}</p>

            <input type="text" v-model="message3">
            <input type="text" v-bind:value="message3" v-on:input="message3=$event.target.value">
            <h2>{{ message3 }}</h2>

        </div>
        <!-- v-model radio -->
        <div id="app-2">
            <label for="male">
                <input type="radio" :value="abc" v-model="gender" id="male"> 男
            </label>
            <label for="female">
                <input type="radio" value="female" v-model="gender" id="female">女
            </label>
            <p>您选择的是：{{gender}}</p>
        </div>
        <!-- v-model checkbox -->
        <div id="app-3">
            <!-- 单个复选框 -->
            <label for="check">
                <input type="checkbox" v-model="checked" id="check">同意协议
            </label>
            <p>是否选中：{{checked}}</p>

            <!-- 多个复选框 -->
            <label><input type="checkbox" v-model="hobbies" value="篮球">篮球</label>
            <label><input type="checkbox" v-model="hobbies" value="足球">足球</label>
            <label><input type="checkbox" v-model="hobbies" value="台球">台球</label>
            <p>您选中的爱好是：{{ hobbies }}</p>
        </div>
        <!-- v-model select -->
        <div id="app-4">
            <!-- 选一个值 -->
            <select v-model="mySelect">
                <option value="apple">苹果</option>
                <option value="orange">橘子</option>
                <option value="banana">香蕉</option>
            </select>
            <p>您最喜欢的水果是：{{mySelect}}</p>
            <!-- 选多个值 -->
            <select v-model="mySelects" multiple>
                <option value="apple">苹果</option>
                <option value="orange">橘子</option>
                <option value="banana">香蕉</option>
            </select>
            <p>您喜欢的水果是：{{ mySelects }}</p>
        </div>
	</body>
</html>
<script>
	let app = new Vue({
        el:'#app',
        data:{
            message1:'',
            message2:'',
            message3:''
        }
    })
    let app2 = new Vue({
        el:'#app-2',
        data:{
            gender:'',
            abc:'male'
        }
    })
    let app3 = new Vue({
        el:'#app-3',
        data:{
            checked:false,
            hobbies:[]
        }
    })
    let app4 = new Vue({
        el:'#app-4',
        data:{
            mySelect:'apple',
            mySelects:[]
        }
    })
</script>
<!-- 
当我们在输入框输入内容时
因为input中的v-model绑定了message，所以会实时将输入的内容传递给message，message发生改变。
当message发生改变时，因为上面我们使用Mustache语法，将message的值插入到DOM中，所以DOM会发生响应的改变。
所以，通过v-model实现了双向的绑定。 

v-model其实是一个语法糖，它的背后本质上是包含两个操作：
1.v-bind绑定一个value属性
2.v-on指令给当前元素绑定input事件


单个勾选框：
v-model即为布尔值。
此时input的value并不影响v-model的值。
多个复选框：
当是多个复选框时，因为可以选中多个，所以对应的data中属性是一个数组。
当选中某一个时，就会将input的value添加到数组中。


和checkbox一样，select也分单选和多选两种情况。
单选：只能选中一个值。
v-model绑定的是一个值。
当我们选中option中的一个时，会将它对应的value赋值到mySelect中
多选：可以选中多个值。
v-model绑定的是一个数组。
当选中多个值时，就会将选中的option对应的value添加到数组mySelects中


-->