You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
49 lines
833 B
49 lines
833 B
<template>
|
|
<h1>{{num}}*2={{double}}</h1>
|
|
<h1>{{num2.count}}*3={{triple}}</h1>
|
|
<button @click="add">累加</button>
|
|
|
|
<button @click="insert">插入</button>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import {computed, defineComponent, reactive, ref} from 'vue'
|
|
|
|
|
|
export default defineComponent({
|
|
name: "Vue3",
|
|
|
|
setup:()=>{
|
|
const num=ref<number>(1)
|
|
|
|
const isAdd=ref<boolean>(false)
|
|
|
|
const num2=reactive<{count:number}>({
|
|
count:1
|
|
})
|
|
|
|
function add() {
|
|
num.value++
|
|
num2.count++
|
|
}
|
|
|
|
function insert(){
|
|
isAdd.value=true
|
|
}
|
|
|
|
function cancel(){
|
|
isAdd.value=false
|
|
}
|
|
|
|
const double=computed<number>(()=>num.value*2)
|
|
|
|
const triple=computed<number>(()=>num2.count*3)
|
|
|
|
return {num,add,double,num2,triple,isAdd,insert,cancel}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |