Vue基础使用之V-Model绑定单选、复选、动态渲染选项的值

nocol.

已于 2024-04-16 20:38:28 修改

阅读量186

点赞数 2

文章标签： vue.js 前端 javascript

于 2024-04-16 20:18:08 首次发布

本文链接：https://blog.csdn.net/zcyzcyjava/article/details/137838753

版权

这里要说明一下，在v-model 绑定的值是id还是value是和<option>中的v-bind保持一致的，如第四个，如果是

<option :value="op[1]"

那v-model绑定的就是数组第二项的值2，4，6

如果是

<option :value="op[1]"

那v-model绑定的就是数组第一项的值1，3，5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>1.复选框</h1>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
    <label for="jack">Jack</label>

    <input type="checkbox" id="john" value="John" v-model="checkedNames">
    <label for="john">John</label>

    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
    <label for="mike">Mike</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>

    <h1>2.单选按钮</h1>
<!--    <input type="radio" id="one" value="One" v-model="picked">One-->
<!--    <input type="radio" id="two" value="Two" v-model="picked">Two-->
    <div v-for="option in options" :key="option.id">
        <input
                type="radio"
                :id="option.id"
                :value="option.value"
                v-model="selectedOption"/>
        />
        <label :for="option.id">{{ option.text }}</label>
    </div>
    <p>选中的是：{{ selectedOption }}</p>


        <h1>3.渲染动态选项</h1>
        <select v-model="selected">
            <option v-for="option in options1" :value="option.text">
                {{ option.text }}
            </option>
        </select>
        <span>Selected: {{ selected }}</span>


        <h1>4.动态渲染  v-model绑定value与key的问题</h1>
            <select v-model="test">
                <option :value="op[1]" v-text="op[0]"  v-for="op in options2"></option>
             </select>
            <div v-text="test"></div>


</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            checkedNames:["Jack","John"],//初始化时多选框选中的数据
            selectedOption: 'Option 2',//v-model默认绑定的是value；因为v-model是个语法糖，是:value='值'和input事件的结合体
            options: [
                { id: '1', value: 'Option 1', text: '选项1' },
                { id: '2', value: 'Option 2', text: '选项2' },
                { id: '3', value: 'Option 3', text: '选项3' },
            ],
            selected: 'One',
            test: '',
            options1: [
                { text: 'One', value: 'A' },
                { text: 'Two', value: 'B' },
                { text: 'Three', value: 'C' }
            ],
            options2:[
                [1, 2],
                [3, 4],
                [5, 6]
            ],
        },
    })
</script>
</body>
</html>