zoukankan      html  css  js  c++  java
  • 单选框,多选框,下拉框值的绑定和获取选项

    单选框,多选框 ,下拉框获取值,都需要用v-model绑定。

    单选框和下拉框绑定的是字符串 ,多选框绑定的是数组。

    下拉框的v-model是写在select标签里的,不是写在option标签里的。

    例子:

    <template>
    <div>
        <!-- (1)单选框,多选框和下拉框都要value,如果是循环的选项,那就要用:value (2)单选框和下拉框,v-model绑定的值是字符串,多选框绑定的值是数组-->
        <input type="checkbox" v-model="items" value="篮球">篮球
        <input type="checkbox" v-model="items" value="足球">足球
        <input type="checkbox" v-model="items" value="跑步">跑步
        <p>你选择的是<span v-for="(item,i) in items" class="items">{{item}}</span></p>
        <input type="radio" v-model="item" value="李子" name="test">李子
        <input type="radio" v-model="item" value="梨子" name="test">梨子
        <input type="radio" v-model="item" value="栗子" name="test">栗子
        <p>你选择的是{{item}}</p>
        <!-- 下拉框的v-model是写在select里的,不是写在option里 -->
        <select name="" id="" v-model="selectItem">
            <option :value="item" v-for="(item,i) in selectItems">{{item}}</option>
        </select>
        <p>你选择的是{{selectItem}}</p>
    </div>
    </template>
    <script>
    export default {
      name: "Home",
      data () {
        return {
            items:[],
            item:"",
            selectItem:"张三",// 下拉框必须设置默认值
            selectItems:["张三","李四","王五"]
        };
      }
    }
    </script>
    <style lang="css" scoped>
    .items{
        display: inline-block;
         50px;
        height: 30px;
        margin-right: 12px;
    }
    </style>
  • 相关阅读:
    5G名词术语
    什么是IPv6
    如何用SecureCRT 登录eNSP模拟器里的设备
    numpy-排序
    numpy-tile 数组复制
    经纬度计算距离与方位角
    numpy-添加操作大全
    高效编程之 concurrent.future
    linux命令 集合
    PostgreSQL-表空间
  • 原文地址:https://www.cnblogs.com/luguankun/p/10811199.html
Copyright © 2011-2022 走看看