vue3

<script >
import {ref} from 'vue';
export default{
  name:'App',
  setup(){
    const count=ref(0);
    const changeCount=function(){
      //count是一个对象，用ref声明的一定要用.value赋值和取值；
      count.value=count.value+10;  
    }
    //返回需要绑定的数据
    return {count,changeCount};
  }
}
</script>

<template>
  <!--v-text绑定count -->
<div v-text="count"></div>
<button @click='count++'>点击此按钮count++ </button>
<button @click="changeCount">点击此按钮执行changCount方法</button>
</template>

<style scoped>
table,td{
    border: 1px solid black;
    border-collapse: collapse;
}
</style>

<script>
import {ref} from 'vue';
export default{
    name:'EasyC',
    setup(){
        const staffList=ref([
            {name:'张三',sex:'男',age:19},
            {name:'李四',sex:"男",age:20},
            {name:'王五',sex:'女',age:19}

        ]);
        return{staffList}; //绑定数据
    }
}

</script>

<template>
<table>
    <tr><td>姓名</td><td>性别</td><td>年龄</td></tr>
    <!-- 循环数组中的数据，每行展示一个数据-->
    <tr v-for="item in staffList">
    <td>{{ item.name }}</td>
    <td>{{ item.sex }}</td>
    <td>{{ item.age }}</td>
    </tr>
</table>
</template>

<style scoped>
table,td{
    border: 1px solid black;
    border-collapse: collapse;
}
</style>