事件处理

事件处理

代码：

<!-- EventProcessingAbabdemo2.vue -->
<template>
  <button @click="addCount">ADD</button>
  <p>count is {{ count }}</p>
</template>

<script setup lang="ts">
// 这里是一个动态绑定的属性
import { ref } from 'vue';
const count = ref(0);
const addCount = () => {
  count.value++;
  console.log("当前count值为：" + count.value);
};
// 你可以在组件中使用这个属性

</script>

<!-- 测试事件处理 -->
 <!-- Event Handling -->
 <!-- 内敛式 @click="count++" -->
<template>
  <button @click="count++">Add 1</button>
  <p>count is {{ count }}</p>
</template>
<script setup lang="ts">
import { ref } from 'vue';
// 这里是一个动态绑定的属性
const count = ref(0);
</script>

<!-- App.vue   -->
<script setup lang="ts">
// import HelloWorld from './components/HelloWorld.vue';
// import ifDemo from './components/ifDemo.vue';
// import ListDemo from './components/ListDemo.vue';
import eventprocessing from './components/eventprocessingabab.vue';
import eventprocessing2 from './components/EventProcessingAbabdemo2.vue';



</script>



<template>
  <!-- <HelloWorld />
  <ifDemo />
  <ListDemo /> -->
  <eventprocessing />
  <eventprocessing2 />
</template>