zoukankan      html  css  js  c++  java
  • 表单下拉框select

    <!DOCTYPE html>
    <html lang="zh">
    
    <head>
        <title></title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://unpkg.com/vue/dist/vue.js"></script>
        <link href="../css/style.css" rel="stylesheet"> </head>
    <body>
    <div id="myApp">
        <h3>你最喜欢的NBA球星是:</h3>
        <select v-model="likedNBAStar" style="210px;">
            <option>科比</option>
            <option>詹姆斯</option>
            <option>哈登</option>
            <option>库里</option>
            <option>杜兰特</option>
        </select>
    
        <h3>我的全明星:</h3>
        <select v-model="likedNBAStars" multiple style="210px;height:210px;">
            <option>阿德托昆博</option>
            <option>怀特赛德</option>
            <option>阿尔德里奇</option>
            <option>戴维斯</option>
            <option>格里芬</option>
            <option>詹姆斯</option>
            <option>杜兰特</option>
            <option>巴特勒</option>
            <option>德罗赞</option>
            <option>哈登</option>
            <option>科比</option>
            <option>韦德</option>
            <option>伦纳德</option>
            <option>库里</option>
            <option>欧文</option>
            <option>保罗</option>
            <option>林树豪</option>
        </select>
    
        <h3>选择结果</h3>
        <p>我最最喜欢: {{ likedNBAStar }}</p>
        <p>我的全明星: {{ likedNBAStars }}</p>
    
    </div>
    <script>
        var myApp = new Vue({
            el: '#myApp', 
            data: {
                likedNBAStar: null,
                likedNBAStars: [],
            },
            methods: {
            },
        });
    </script>
    </body>
    
    </html>
  • 相关阅读:
    Python基础之迭代器、生成器
    Python基础之模块+异常
    Python基础之面向对象思维解决游戏《天龙八部》
    Oracle创建存储过程
    数据库范式
    Oracle条件判断
    Oracle的三种循环
    Oracle的pl/sql变量类型
    oracle如何实现去重和分页
    相关子查询和非相关子查询
  • 原文地址:https://www.cnblogs.com/Jeely/p/11057355.html
Copyright © 2011-2022 走看看