<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<template>
<div>
<button type="text">是多少：{{count}}</button>
<button></button>
</div>
</template>
<script>
import {reactive, toRefs, ref, watch} from 'vue'
export default {
props: {
select: Function,
},
setup(props, ctx) {
// 定义数据源
const count = ref(0);
// 指定要监视的数据源
watch(count, (count, prevCount) => {
console.log(count, prevCount)
})
setInterval(() => {
count.value += 2
}, 2000)
console.log(count.value)
return {
count
}
}
}
</script>
</body>
</html>
改了模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue的方法_侠课岛(9xkd.com)</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div>
<p >是多少：{{count}}</p>
</div>
<script>
import {reactive, toRefs, ref, watch} from 'vue'
export default {
props: {
select: Function,
},
setup(props, ctx) {
// 定义数据源
const count = ref(0);
// 指定要监视的数据源
watch(count, (count, prevCount) => {
console.log(count, prevCount)
})
setInterval(() => {
count.value += 2
}, 2000)
console.log(count.value)
return {
count
}
}
}
</script>
</body>
</html>
能显示，但没有响应式，再改改。
这是html的文件，不是vue的。
用vite新建了vue，放进Helloworld.vue里了，也还是不行
<template>
<div>
<button>是多少：{{count}}</button>
<button></button>
</div>
</template>
<script>
import {reactive, toRefs, ref, watch} from 'vue'
export default {
props: {
select: Function,
},
setup(props, ctx) {
// 定义数据源
const count = ref(0);
// 指定要监视的数据源
watch(count, (count, prevCount) => {
console.log(count, prevCount)
})
setInterval(() => {
count.value += 2
}, 2000)
console.log(count.value)
return {
count
}
}
}
</script>
不知道错在哪里
倒是能运行，不报bug
我天，重新运行了一下，居然可以！！！
怎么就可以了呢？
