Vue v-model 指令绑定动态变量

by deniro

HTML

<div id="app">
    <input id="radio1" type="radio" v-model="picked" :value="value">
    <label for="radio1">文学</label>
    <input id="radio2" type="radio" v-model="picked" :value="value2">
    <label for="radio2">艺术</label>
    <input id="radio3" type="radio" v-model="picked" :value="value3">
    <label for="radio3">经济</label>
    <br>
    <p>{{picked}}</p>
    <p>{{value}},{{value2}},{{value3}}</p>
</div>

<div id="app2">
    <input id="checkbox" type="checkbox" v-model="checked" :true-value="value1" :false-value="value2">
    <label for="checkbox">开关</label>
    <p>checked：{{checked}}</p>
    <p>value1：{{value1}}</p>
    <p>value2：{{value2}}</p>
</div>

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

Vue

var app3 = new Vue({
        el: '#app3',
        data: {
            selected: ''
        }
    });
    var app2 = new Vue({
        el: '#app2',
        data: {
            value1: '亮',
            value2: '暗',
            checked: ''
        }
    });
    var app = new Vue({
        el: '#app',
        data: {
            picked: false,
            value: '文学',
            value2: '艺术',
            value3: '经济',
        }
    });