51 lines
813 B
Vue
51 lines
813 B
Vue
<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>
|