63 lines
1.1 KiB
Vue
63 lines
1.1 KiB
Vue
<template>
|
|
<div>
|
|
<p>
|
|
<select name="select" v-model="curPage">
|
|
<option v-for="(item, index) in options" :key="index" :value="item.value">{{ item.label }}</option>
|
|
</select>
|
|
<button @click="watchStop">停止侦听</button>
|
|
</p>
|
|
<br />
|
|
<p>{{ res }}</p>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { watch, ref } from "vue";
|
|
const options = [
|
|
{
|
|
label: "第一页",
|
|
value: 1
|
|
},
|
|
{
|
|
label: "第二页",
|
|
value: 2
|
|
},
|
|
{
|
|
label: "第三页",
|
|
value: 3
|
|
},
|
|
{
|
|
label: "第四页",
|
|
value: 4
|
|
},
|
|
{
|
|
label: "第五页",
|
|
value: 5
|
|
}
|
|
];
|
|
const curPage = ref(1);
|
|
const res = ref("");
|
|
const stop = watch(
|
|
curPage,
|
|
(newValue) => {
|
|
const curItem = options.filter((item) => item.value === newValue)[0];
|
|
res.value = `${curItem.label} 的数据`;
|
|
}
|
|
);
|
|
|
|
const watchStop = () => {
|
|
stop();
|
|
};
|
|
|
|
|
|
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
select,
|
|
button {
|
|
height: 30px;
|
|
padding: 0 8px;
|
|
box-sizing: border-box;
|
|
}
|
|
</style> |