• 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>
  • 相关阅读:
    Julia
    《风控策略笔记》之风控审批策略(三)--量化指标与策略调优
    《风控策略笔记》之风控审批策略(二)--决策引擎与策略调优
    《风控策略笔记》之风控审批策略(一)--前言与审批策略架构搭建和数据源
    schannel: next InitializeSecurityContext failed: SEC_E_ILLEGAL_MESSAGE错误
    从 kswapd0 进程CPU占用过高 到计算机内存详解
    pandas窗口函数--rolling
    请求行与相应行
    URI与URN与URL详解
    mysql索引详解
  • 原文地址:https://www.cnblogs.com/kukai/p/12860017.html
Copyright © 2020-2023  润新知