<template>
<div>
<img alt="Vue logo" src="./assets/logo.png">
<button @click = "add">add</button>
<p>
{
{data.x}}--{
{data.y}}
</p>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import HelloWorld from './components/HelloWorld.vue';
import {ref,reactive} from "vue";
export default defineComponent({
name: 'App',
setup(){
//表明它是响应式的
const count = ref(100);
const data = reactive({
x:100,
y:100
})
const add = ()=>{
// 写一段逻辑
data.x += 88;
data.y += 99;
}
// 必须返回模块中才能够使
return {
data,
add
}
}
});
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-f
vue3 reactive 实现响应式
最新推荐文章于 2024-06-30 12:08:28 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)