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>
  • 相关阅读:
    IE 创建条件样式
    Weinre
    three.js 之 透明物体不能正常显示
    用shader实现流动的水面(webgl)
    用js的方式运行c程序之webassemly
    three.js效果之热力图和轨迹线
    three.js后期之自定义shader通道实现扫光效果
    《计算机网络》物理层
    《计算机网络》概述
    pixi小游戏开发(vue+typescript)
  • 原文地址:https://www.cnblogs.com/kukai/p/12860017.html
Copyright © 2011-2022 走看看