Vue 测试实例 - 自学教程(runoops.com)

源代码

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 自学教程(runoops.com)</title>
  <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
  <div id="app">
     <select @change="changeVal($event)" v-model="selOption">
        <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">
           
           <option v-if = "index == 1" :value="site.name" selected>{{site.name}}</option>
           <option v-else :value="site.name">{{site.name}}</option>
        </template>
     </select>
     <div>您选中了:{{selOption}}</div>
  </div>
   
  <script>
  const app = {
      data() {
          return {
              selOption: "Runoops",
              sites: [
                    {id:1,name:"Google"},
                    {id:2,name:"Runoops"},
                    {id:3,name:"Taobao"},
              ]
           }
          
      },
      methods:{
          changeVal:function(event){
              this.selOption = event.target.value;
              alert("你选中了"+this.selOption);
          }
      }
  }
   
  Vue.createApp(app).mount('#app')
  </script>
  </body>
  </html>

运行结果