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>
  • 相关阅读:
    atitit.session的原理以及设计 java php实现的异同
    atitit.破解 拦截 绕过 网站 手机 短信 验证码 之自动获取手机短信方式 attilax 总结
    java softReference 详解
    android开发:TextView中android:autoLink属性的作用
    抽象类和接口的简单差别
    android一个简单的线程实例
    Java 批注
    最简单的菜单操作
    AsyncTask的参数介绍
    (转)android中ListView在划屏到底部的时候动态添加ListView的Item实现
  • 原文地址:https://www.cnblogs.com/kukai/p/12860017.html
Copyright © 2011-2022 走看看