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>
  • 相关阅读:
    Task async await
    信号量
    操作符?? 与 ?.
    Expression表单式树
    delegate Func Action Expression
    常用技术
    一次移动记账 App 的设计探索
    网站渗透测试教程--渗透测试基本程序
    【】网站渗透测试教程--了解渗透测试
    15 位健在的牛叉程序员,你知道哪几位?
  • 原文地址:https://www.cnblogs.com/kukai/p/12860017.html
Copyright © 2011-2022 走看看