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

Posted ︶ㄣ鳯躌氷瀚

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue里面select标签 添加默认选项<option v-for="item in email" :value="'@'+item"&g相关的知识,希望对你有一定的参考价值。

 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"&g的主要内容,如果未能解决你的问题,请参考以下文章

Vue:如何根据选择的选项更改路线,并在 <select> 元素中显示默认选择的选项?

vue 去除a标签点击时的默认背景色

<select> 中的默认选项未显示

html中<select>标签用法解析及如何设置select的默认选中状态

HTML中select控件怎样设置成默认值,并且下拉框选项中没有默认值

vue+elementUi实现select标签选项带图片,且选中回显图片