vue里面select标签 添加默认选项<option v-for="item in email" :value="'@'+item"> chooseEmail: '@163',

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style type="text/css">
 7         [v-cloak] {
 8             display: none;
 9         }
10     </style>
11 </head>
12 <body>
13 <!-- 定义视图 -->
14 <div id="app">
15     <!-- 选择颜色 -->
16     <!-- 通过value定义选项的值 -->
17     <!-- <select v-model="color">
18         <option value="isRed">red</option>
19         <option value="isGreen">green</option>
20         <option value="isBlue" selected>blue</option>
21     </select> -->
22     <!-- 多选 -->
23     <!-- <select v-model="color" multiple>
24         <option value="isRed">red</option>
25         <option value="isGreen">green</option>
26         <option value="isBlue" selected>blue</option>
27     </select> -->
28     <!-- <h1>{{color}}</h1> -->
29     <!-- hao123邮箱 -->
30     <select v-model="chooseEmail">
31         <option v-for="item in email" :value="‘@‘+item">@{{item}}<template v-if="item === ‘yeah‘">.net</template><template v-else>.com</template></option>
32     </select>
33     <h1 v-cloak>{{chooseEmail}}</h1>
34 </div>
35 <script type="text/javascript" src="vue.js"></script>
36 <script type="text/javascript">
37 // 创建vm对象
38 var app = new Vue({
39     el: ‘#app‘,
40     data: {
41         // color: ‘isGreen‘
42         // color: [‘isGreen‘, ‘isBlue‘],
43         // 绑定选中的邮箱
44         chooseEmail: ‘@163‘,
45         email: [‘163‘, ‘126‘, ‘sina‘, ‘yeah‘, ‘sohu‘, ‘139‘]
46     }
47 })
48 </script>
49 </body>
50 </html>

vue里面select标签 添加默认选项<option v-for="item in email" :value="'@'+item"> chooseEmail: '@163',

原文地址:https://www.cnblogs.com/oklfx/p/8497071.html

时间: 2024-10-17 08:28:24

vue里面select标签 添加默认选项<option v-for="item in email" :value="'@'+item"> chooseEmail: '@163',的相关文章

each函数遍历select标签下的所有option选项

如下: <select id="asd" name="sweet1"> <option value=1>--四川--</option> <option value=2>--广东--</option> </select> <script>function eachoption(){ $("#asd option").each( function(){ alert($

select标签中怎样控制option的显示数量

最近做项目,需要动态加载数据显示到下拉列表中. 刚开始用select标签,由于数据较多,一次性全部加载,下拉列表会拖得很长,不忍直视(默认会显示20个). 我想控制select中的option显示的个数,例如:只显示5个,其余的通过滚动条来控制显示. 经过反复折腾,发现直接操作select标签无法达到目的,于是改换策略,用input标签和ul标签来模拟select标签. 效果: Demo下载 select标签中怎样控制option的显示数量,布布扣,bubuko.com

select标签的默认样式修改

在项目中,用到select标签,需要对select标签自定义样式. 在chrome浏览器中会对select有一个默认的border-radius,并且无法去掉. 可以通过下面的方法来解决: 1.需要通过下面的css才能修改select的border-radius .select { -webkit-appearance: none; -webkit-border-radius: 0px; } 但是这个方法会让select自带的三角箭头消失. 可以通过background来设置一个背景三角箭头来解

关于java 获取 html select标签 下拉框 option 文本内容 隐藏域

在HTML中从多选下拉框中提取已选中选项的文本内容到后台,被这个问题难倒了. demo.jsp文件 <select id="selecttype" name"type"> <option value="" selected="selected">请选择</option> <c:forEach items="${typeList}" var="typeLis

js对select动态添加和删除OPTION

<select id="ddlResourceType" onchange="getvalue(this)"> </select> 动态删除select中的所有options: document.getElementById("ddlResourceType").options.length=0; 动态删除select中的某一项option: document.getElementById("ddlResourc

select标签下的选项添加分类

<select multiple="multiple"> <optgroup label="On-line2"> <option>A</option> <option>B</option> <option>C</option> </optgroup> <optgroup label="On-line2"> <option&

jsp中select标签解决默认选中问题

例如:根据timeBucket的值得不同,默认后台控制选中不同的值 <select name="timeBucket${c.id}" style="width: 80px" id="timeBucket${c.id}" class="span4 pull-left"> <option value="0" <c:if test="${c.timeBucket=='0'}&qu

给input标签添加默认提示文字

1  <input name="username" placeholder="请输入用户名" /> placeholder = "提示文字"

select标签multiple属性的使用方法

前些日子公司让做一个功能模块,对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: 一.实现代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&qu