<template><div class="persion"><h2>姓名：{{name}}</h2><h2>年龄：{{age}}</h2><h2>性别：{{sex}}</h2> <button @click="nameTel">点击姓名</button> <button @click="ageTel">点击年龄</button><button @click="showTel">点击显示电话</button></div>
</template><script>import { vShow } from 'vue';export default {data() {return {name: 'mick',age:18,sex:'男',// 添加tel属性tel: '1234567890'}},methods:{showTel(){ // 点击事件 调用方法alert(this.tel)},nameTel(){this.name='zhangsan'},ageTel(){this.age++;}}}
</script>
<style>.persion{background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}
</style>
<template><div class="persion"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>性别：{{ sex }}</h2><button @click="nameTel">点击姓名</button><button @click="ageTel">点击年龄</button><button @click="showTel">点击显示电话</button></div>
</template><script>
export default {name: 'persion',setup() {let name = '张三';let age = 18;let sex = '男';let tel = '13812345678';function nameTel() {name = '李四';console.log(name);}function ageTel() {age = 20;console.log(age);}function showTel() {alert(tel);}return { name, age, sex, nameTel, ageTel, showTel }}// 定义方法}</script>
<style>
.persion {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>
<template><div class="persion"><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><h2>性别：{{ sex }}</h2><button @click="nameTel">点击姓名</button><button @click="ageTel">点击年龄</button><button @click="showTel">点击显示电话</button></div>
</template><script setup>let name = '张三';let age = 18;let sex = '男';let tel = '13812345678';function nameTel() {name = '李四';console.log(name);}function ageTel() {age = 20;console.log(age);}function showTel() {alert(tel);}</script>
<style>
.persion {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;
}
</style>
