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>