<script  lang="ts">
  export default {
    name:'Person',
    data(){
      return{
        name:'张三',
        age:18,
        tel: '13700009999'
      }
    },
    methods:{
      //展示电话
      showTel(){
        alert(this.tel)
      },
      //修改电话
      setTel(){
        this.tel = '137888888888'
      },
      //修改年龄
      setAge(){
        this.age += 1;
      }

    }


  }
</script>

<template>
  <main class="setBox">
    <h1>姓名:{{name}}</h1>
    <h1>年龄:{{age}}</h1>
    <button @click="showTel">电话:{{name}}</button>
    <button @click="setAge">年龄+1</button>
    <button @click="setTel">电话修改</button>
  </main>
</template>

<style scoped>
.setBox {
  width: 100%;
  background-color: palegreen;
  border-radius: 1.5rem;
  padding: 3rem;
}


</style>
