引入依赖 reactive
import {reactive} from 'vue'
html 页面效果
image.png
html 页面
<template>
<div class="c000">
{{num.num}}
<button class="c000" @click="addNumber">
累加
</button>
</div>
<div>
<input v-model="state2.item.a" type="text">
<input v-model="state2.item.b" type="text">
<button @click="addFun">add</button>
</div>
<ul v-for="(item,i) in state.stus" :key="i" @click="delet(i)">
<li>{{item.a}}=={{item.b}}</li>
</ul>
</template>
<script>
import {removeData,addData,addNum} from './handerFun'
export default {
name: 'Home',
components: {
},
setup(){
let {state,delet} = removeData()
let {state2,addFun} = addData(state);
let {num,addNumber} = addNum()
return {state,delet,state2,addFun,addNumber,num}
}
}
</script>
<style lang="scss">
.c000{
color:#000;
font-size: 30px;
}
</style>
处理业务逻辑方法js
import {reactive} from 'vue'
function removeData(){
let state = reactive({
stus:[{
a:1,b:2
},
{
a:5,
b:9
}]
})
function delet(i){
state.stus = state.stus.filter((ele,index)=> index !=i)
}
return {state,delet}
}
function addData(state){
let state2= reactive({
item:{
a:'',
b:''
}
})
function addFun(e){
e.preventDefault();
let item = Object.assign({},state2.item);
state2.item.a = '';
state2.item.b = '';
state.stus.push(item)
}
return{state2,addFun}
}
function addNum(){
let num = reactive({
num:0
})
function addNumber(){
num.num++
}
return {num,addNumber}
}
export {removeData,addData,addNum}
参考地址
获取 demo 地址
https://e.coding.net/Allen68798/vue3.0-demo/vue3.0_demo.git
