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>
原文：https://www.cnblogs.com/oklfx/p/8497071.html
