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>

 

posted @ 2018-03-03 16:39  ︶ㄣ鳯躌氷瀚  阅读(812)  评论(0)    收藏  举报