表单输入绑定

表单输入绑定通常我们使用v-model双向绑定

单行文本框

<div id="root">
    <input type="text" v-model="username">
    <h2>{{username}}</h2>
</div>

<script>
var root = new Vue({
    el:'#root',
    data:{
        username: '张三'
    }
})
</script>

多行文本框

<div id="root">
    <textarea v-model="msg">
    </textarea>
    <h2>{{msg}}</h2>
</div>

<script>
var root = new Vue({
    el:'#root',
    data:{
        msg: '暂无数据'
    }
})

</script>

单选下拉列表框

<div id="root">
    <select v-model="msg">
        <option value="">请选择</option>
        <option value="本科">本科</option>
        <option value="大专">大专</option>
        <option value="中专">中专</option>
    </select>
    <h2>{{msg}}</h2>
</div>

<script>
var root = new Vue({
    el:'#root',
    data:{
        msg: ''
    }
})

</script>

多行下拉列表框

<div id="root">
    <select multiple v-model="msg">
        <option value="">请选择</option>
        <option value="本科">本科</option>
        <option value="大专">大专</option>
        <option value="中专">中专</option>
    </select>
    <h2>{{msg}}</h2>
</div>

<script>
var root = new Vue({
    el:'#root',
    data:{
        msg: ['本科','中专']
    }
})

</script>

单选框

<div id="root">
    <input type="radio" v-model="sex" value="男"> 男
    <input type="radio" v-model="sex" value="女"> 女
    <h2>{{sex}}</h2>
</div>

<script>
var root = new Vue({
    el: '#root',
    data: {
        sex: '女'
    }
})
</script>

复选框

默认单个复选框内置的值是布尔值，也就是真和假

<div id="root">
    <input type="checkbox" v-model="check"> 审核
    <h2>{{check}}</h2>
</div>

<script>
var root = new Vue({
    el: '#root',
    data: {
        check: false
    }
})
</script>

上面的布尔值也不是每次都那么用，所有需要自定义真值和假值

<div id="root">
    <input type="checkbox" true-value="真的" false-value="假的" v-model="check"> 审核
    <h2>{{check}}</h2>
</div>

<script>
var root = new Vue({
    el: '#root',
    data: {
        check: '真的'
    }
})
</script>

多个复选框取值、设值情况

<div id="root">
    <input type="checkbox" v-model="habby" value="篮球"> 篮球
    <input type="checkbox" v-model="habby" value="足球"> 足球
    <input type="checkbox" v-model="habby" value="排球"> 排球
    <h2>{{habby}}</h2>
</div>

<script>
var root = new Vue({
    el: '#root',
    data: {
        habby: []
    }
})
</script>

综合示例 全选反选

<div id="root">
    <button @click="checkAll">{{txt}}</button> <br><br>
    <template v-for="val in list">
        <input 
        type="checkbox"
        v-model="habby"
        :value="val"
        > {{val}}
    </template>

</div>

<script>
var root = new Vue({
    el: '#root',
    data: {
        txt: '全选',
        list: ['篮球','足球','排球','羽毛球'],
        habby: []
    },
    methods: {
        checkAll(){
            if(this.txt=='全选'){
                this.txt = '反选';
                this.habby = this.list;
            }else{
                this.txt = '全选';
                this.habby = [];
            }
        }
    }
})
</script>