<!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="width:210px;">

        <option>科比</option>

        <option>詹姆斯</option>

        <option>哈登</option>

        <option>库里</option>

        <option>杜兰特</option>

    </select>

    <h3>我的全明星：</h3>

    <select v-model="likedNBAStars" multiple style="width: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>

表单下拉框select的更多相关文章

  1. asp.net MVC4 表单 - 下拉框

    1.下拉框代码方式 控制器内构建下拉项目: List<SelectListItem> list = new List<SelectListItem>(); list.Add(n ...

  2. struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input

    原文地址:struts2 jsp表单提交后保留表单中输入框中的值 下拉框select与input jsp页面 1     function dosearch() {2         if ($(&q ...

  3. JQuery操作下拉框 select

    要实现这种效果: html代码 1<script src="js/jquery-1.7.2.min.js"></script> 2 <table> ...

  4. 【jQuery获取下拉框select、单选框radio、input普通框的值和checkbox选中的个数】

    radio单选框:name属性相同 <input type="radio" id="sp_type" name="p_type" va ...

  5. 关于jQuery表单下拉selected设置无效的解决方案

    表单下拉选项使用selected设置,发现第一次默认选中成功,在页面不刷新的情况下,再次下拉,selected属性设置了,默认选中不生效 研究发现是浏览器兼容的问题 一,解决浏览器缓存问题,在HTML ...

  6. jQuery对下拉框Select操作总结

    jQuery对下拉框Select操作总结 转自网络,留做备用 jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change( ...

  7. 下拉框select中option居中样式

    下拉框select中option居中样式 text-align:center;text-align-last:center;

  8. 在vue中的form表单中下拉框中的数据来自数据库查询到的数据

    文章目录 1.实现的效果: 2.前端html代码 3.js中的代码 4.后端的方法 1.实现的效果: 增加一个新的类型到数据库 2.前端html代码 需要注意的部分:prop后边是表单中的字段 v-m ...

  9. 吾八哥学Selenium(四)：操作下拉框select标签的方法

    我们在做web页面自动化测试的时候会经常遇到<select></select>标签的下拉框,那么在Python里如何实现去操作这种控件呢?今天就给大家分享一下这个玩法.为了让大 ...

随机推荐

  1. Red and Black 模板题 /// BFS oj22063

    题目大意: Description There is a rectangular room, covered with square tiles. Each tile is colored eithe ...

  2. 【python】快速排序

    快速排序思想和C++的差不多,主要是通过写排序对python的语法更加了解. # 快速排序 def qsort(arr, left, right): if left >= right: retu ...

  3. iOS开发系列-常见离线存储方式

    概述 在很多社交App手机在手机没有网络时,重新启动应用,依然能否展示上次访问的数据,提高用户体验,这个就是离线数据存储的运用场景.在iOS开发中常见的离线存储技术有Plist存储.个人偏好存储.解归 ...

  4. Impala简介

  5. sql count 函数用法

    count(*) 会查询所有记录数,,包括为null值的数据: count(column)不会包含 column值为null的情况: count(1) 和 count(*)相同,,不同的是,,mysq ...

  6. JAVA算法之递归

    Ⅰ.三角数字 首先我们来看一组数字:1,3,6,10,15,21.....,在这个数列中第n项是由n-1项加n得到的,这个序列中的数字称为三角数字因为他们可以形象化地表示成一个三角形排列.如下图 通过 ...

  7. css---过渡天坑

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. MySQL 其他基础知识

    -- 查询存储引擎show engines;-- 显示可用存储引擎show variables like 'have%'; -- concat多个字段联合select tname ,cname ,co ...

  9. mysql数据库优化思路

    1.设置合适的主键和索引. (1).设置主键和索引的字段尽量不要选取经常修改的字段,同时索引的个数一般不宜超过6个: (2).sql语句中like  “%str%” 不支持索引, "str% ...

  10. 用shell脚本执行php删除缓存文件

    <?php #定义删除路径//服务器缓存目录的路径 $path = '/www/wwwroot/****/data/runtime'; #调用删除方法 deleteDir($path); fun ...