<!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. 最接近神的人_NOI导刊2010提高(02)

    题目描述 破解了符文之语,小FF开启了通往地下的道路.当他走到最底层时,发现正前方有一扇巨石门,门上雕刻着一幅古代人进行某种活动的图案.而石门上方用古代文写着“神的殿堂”.小FF猜想里面应该就有王室的 ...

  2. Mybatis与Spring整合(CURD)

    项目采用Maven构建,用Junit进行测试,数据库是Mysql,连接池是c3p0,未测试缓存部分 1.Maven的“pom.xml”文件 <project xmlns="http:/ ...

  3. iOS逆向系列-tweak补充

    tweak加载资源 开发自己的deb插件需要加载自己的资源,比如图片资源.iOS中常用的两种加载图片资源的方式: + (nullable UIImage *)imageNamed:(NSString ...

  4. 解决Keep-Alive 和 Close 不能使用此属性设置

    http://www.hejingzong.cn/blog/viewblog_86.aspx Keep-Alive 和 Close 不能使用此属性设置 public static void SetHe ...

  5. CSIC_716_20191118【常用模块的用法 Json、pickle、collections、openpyxl】

    序列化模块 序列化:将python或其他语言中的数据类型,转变成字符串类型. python中的八大数据类型回顾:int float str list tuple dict set bool 反序列化: ...

  6. mui--使用mui中的图文表格组件时出现一条横线的解决方法

    最近做的微信公众号点击链接跳转到H5页面,该H5页面使用mui做的,遇到的商品列表页出现一个横线的问题, 这个是修改前的图片 解决方法: <style type="text/css&q ...

  7. JavaScript - 判断当前使用的浏览器类型

    <script> window.onload = function() { // 判断当前使用的浏览器类型 var browserType = navigator.userAgent.to ...

  8. CSS表格属性

    border-collapse:表格边框线合并,取值:collapse.

  9. typedef void (*funcptr)(void) typedef void (*PFV)(); typedef int32_t (*PFI)();

    看到以下代码,不明白查了一下: /** Pointer to Function returning Void (any number of parameters) */ typedef void (* ...

  10. 如何解决:修改.gitignore后,不生效

    1.git rm -r --cached . 删除缓存 2.git add .   添加要提交的文件 3.git commit -m "update .gitignore" 提交 ...