发现Option里的value值会被当做字符串,在sum.value+n.value时会变成字符串拼接

把字符串变成数字方法

value前加:,变成v-bind

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<h2>{{sum}}</h2>
<select v-model="n">
<option :value>1</option>
<option :value>2</option>
<option :value>3</option>
</select>
<button @click="add"></button>
<button @click="minus"></button>
</template>

<script setup lang="ts" name="Count">
import {ref} from "vue";
let sum = ref(1)
let n = ref(1)
</script>

v-mode后加.number,变成数字(推荐)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<h2>{{sum}}</h2>
<select v-model.number="n">
<option value>1</option>
<option value>2</option>
<option value>3</option>
</select>
<button @click="add"></button>
<button @click="minus"></button>
</template>

<script setup lang="ts" name="Count">
import {ref} from "vue";
let sum = ref(1)
let n = ref(1)
</script>