Vue v-model 指令

by deniro

HTML

<div id="app">
    <input type="text" v-model="content" placeholder="请输入" value="初始值">
    <p>输入框：{{content}}</p>
</div>
<div id="app2">
    <textarea v-model="content" placeholder="请输入">初始值</textarea>
    <p>内容：</p>
    <p style="white-space: pre">{{content}}</p>
</div>
<div id="app3">
    <textarea @input="inputHandler" placeholder="请输入"></textarea>
    <p>内容：</p>
    <p style="white-space: pre">{{content}}</p>
</div>

<div id="app4">
    <input id="radio1" type="radio" v-model="checked" value="文学">
    <label for="radio1">文学</label>
    <input id="radio2" type="radio" v-model="checked" value="艺术">
    <label for="radio2">艺术</label>
    <input id="radio3" type="radio" v-model="checked" value="经济">
    <label for="radio3">经济</label>
    <br>
    <p>选择了：{{checked}}</p>
</div>

<div id="app5">
    <input id="checkbox1" type="checkbox" v-model="checked" value="文学">
    <label for="checkbox1">文学</label>
    <input id="checkbox2" type="checkbox" v-model="checked" value="艺术">
    <label for="checkbox2">艺术</label>
    <input id="checkbox3" type="checkbox" v-model="checked" value="经济">
    <label for="checkbox3">经济</label>
    <br>
    <p>选择了：{{checked}}</p>
</div>

<div id="app6">
    <select v-model="selected">
        <option value="1">文学</option>
        <option value="2">艺术</option>
        <option>经济</option>
    </select>
    <br>
    <p>选择了：{{selected}}</p>
</div>

<div id="app7">
    <select v-model="selected" multiple>
        <option value="1">文学</option>
        <option value="2">艺术</option>
        <option>经济</option>
    </select>
    <br>
    <p>选择了：{{selected}}</p>
</div>

<div id="app8">
    <select v-model="selected">
        <option v-for="option in options"
                 :value="option.value">{{option.text}}
        </option>
    </select>
    <br>
    <p>选择了：{{selected}}</p>
</div>

Vue

var app8 = new Vue({
        el: '#app8',
        data: {
            selected: '1',
            options: [
                {text: '文学', value: '1'},
                {text: '艺术', value: '2'}
            ]
        }
    });
    var app7 = new Vue({
        el: '#app7',
        data: {
            selected: '1'
        }
    });
    var app6 = new Vue({
        el: '#app6',
        data: {
            selected: '1'
        }
    });
    var app5 = new Vue({
        el: '#app5',
        data: {
            checked: ['文学', '艺术']
        }
    });
    var app4 = new Vue({
        el: '#app4',
        data: {
            checked: '文学'
        }
    });
    var app3 = new Vue({
        el: '#app3',
        data: {
            content: ''
        },
        methods: {
            inputHandler: function (event) {
                this.content = event.target.value;
            }
        }
    });
    var app2 = new Vue({
        el: '#app2',
        data: {
            content: ''
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            content: ''
        }
    });