v-for/v-if 联合使用

 

联合使用 v-for/v-if 给 select 设置默认值：

 

v-for/v-if 实例

v-for 循环出列表，v-if 设置选中值：

 

<div id="app">

   <select @change="changeVal($event)" v-model="selOption">

      <template v-for="(site,index) in sites" :site="site" :index="index" :key="site.id">

         <!-- 索引为 1 的设为默认值，索引值从0 开始-->

         <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: "Runoob",

            sites: [

                  {id:1,name:"Google"},

                  {id:2,name:"Runoob"},

                  {id:3,name:"Taobao"},

            ]

         }

        

    },

    methods:{

        changeVal:function(event){

            this.selOption = event.target.value;

            alert("你选中了"+this.selOption);

        }

    }

}

 

Vue.createApp(app).mount('#app')

</script>