Vue实例：v-on/v-for/v-if的联合使用

v-on

v-on：为元素绑定监听事件

v-on:事件名="函数名"，简写@事件名='函数名'

v-on绑定的事件触发后，vue会去实例对象的methods中找对应的回调函数

使用@事件名='函数名($event)'来获取事件对象

v-for

v-for：循环指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-if

v-if：条件判断指令，指令的表达式返回 true 时才执行。

以下为完整实例代码：

<div id="app">
		<select @change="changeVal($event)" v-model="selOption">
			<template v-for="(site,index) in sites">
				<option v-if="index==1" :value="site.name" selected>{{site.name}}</option>
				<option v-else :value="site.name">{{site.name}}</option>
			</template>
		</select>
		<p>您当前选择了：{{selOption}}</p>
	</div>


const app = {
			data() {
				return {
					selOption:'谷歌',
					sites: [
						{id:1, name:'百度'},
						{id:2, name:'谷歌'},
						{id:3, name:'哈喽吧'}
					]
				}
			},
			methods:{
				changeVal:function(event){
					this.selOption=event.target.value;
				}
			}
		}

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