zoukankan      html  css  js  c++  java
  • vue下拉列表示例

    选择列表就是下拉选择器,也是常见的表单控件,同样也分为单选多选两种方式
     
    下拉列表单选方式示例
     
    注意:v-model 就会 优先匹配 value
        如果没有 就会直接匹配<option>的 text 
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <select v-model="item">
                <option>北京</option>
                <option>天津</option>
                <option>上海</option>
                <option>重庆</option>
            </select>
            <span>被选中的城市为:{{item}}</span>
        </div>
        <script>
            var v=new Vue({
                el:"#app",
                data:{
                    item:"北京"
                }
            });
        </script>
    </body>
    </html>
     
    多选下拉列表示例
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <select v-model="item"  multiple>
                
                <option >天津</option>
                <option>上海</option>
                <option>重庆</option>
                <option >北京</option>
            </select>
            <span>被选中的城市为:{{item}}</span>
        </div>
        <script>
            var v=new Vue({
                el:"#app",
                data:{
                    item:[]
                }
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    RADAR毫米波雷达传感器
    固态LiDAR,半固态混合LiDAR,机械LiDAR
    Lidar激光雷达市场
    echarts 环形图中自定义文字
    uni-app base64 无法显示问题
    实战二(上):针对非业务的通用框架开发,如何做需求分析和设计?
    实战一(下):如何实现一个遵从设计原则的积分兑换系统?
    实战一(上):针对业务系统的开发,如何做需求分析和设计?
    学而不记,不学无异 -- English learning
    springmvc 传入返回参数更改
  • 原文地址:https://www.cnblogs.com/kukai/p/12860017.html
Copyright © 2011-2022 走看看