<template>
    <div>
        <div class="count">
            count: {{ count }}
        </div>
        <button @click="countaddFn">count++</button>
    </div>
</template>

<script>
import { ref } from 'vue';

export default {
    setup () {
        let count=ref(0)
        let countaddFn=()=>{
            
            count.value++
        }
        return {
            count,countaddFn
        }
    }
}
</script>

<template>
    <div>
        <table border="1">
            <tr>
                <th>id</th>
                <th>姓名</th>
                <th>年齡</th>
                <th>性別</th>
            </tr>
            <tr v-for="item in user" :key="item.id">
                <td>{{ item.id }}</td>
                <td>{{ item.name }}</td>
                <td>{{ item.age }}</td>
                <td>{{ item.gender }}</td>
            </tr>
        </table>
        <button @click="modifyTheFn">修改數(shù)據(jù)</button>
    </div>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup () {
        // 復(fù)雜類型數(shù)據(jù)定義
        let user=reactive([
            {id:1,name:'張三',age:20,gender:'男'},
            {id:2,name:'李四',age:30,gender:'中性'},
            {id:3,name:'王五',age:40,gender:'女'},
            {id:4,name:'老六',age:50,gender:'未知'},
        ])
        function modifyTheFn(){
            user[1].name='老七'
        }
        return {
            user,modifyTheFn
        }
    }
}
</script>