代码如下
<template>
<div class="plus">
<h1>当前求和为:{{ sum }}</h1>
<select v-model="n">
<option selected value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button>加</button>
<button>减</button>
</div>
</template>
<script lang="ts" setup name="Plus">
import { ref, watch } from 'vue'
let sum = ref(0);
let n = ref(0);//问题出在这里n被初始化为0了
watch(n, (v) => {
console.log("v:", v)
})
</script>
打开网页发现默认选项的值一直是空白,后面把n的初始值改成1就生效了。
初步猜测可能是组件挂载的时候初始化动态变量n,把selected属性给覆盖掉了。