010-方法的定义和使用

方法的定义和使用

<templete>

<div>

<button @click="hiButton1">button1</button> <!-- 无参方法调用方式 -->

<button @click="hiButton2(200)">button1</button> <!-- 无参方法调用方式 -->

</div>

</templete>

<script>

import { defineComponent, ref } from 'vue'

export default defineComponent({

name: 'example',

setup(){

let age = ref(19)

//无参函数定义方式

let hiButton1 = () =>{ //使用箭头函数

console.log("click Button1!, age is ", age.value) //使用.value的方式访问变量的值

}

//有参函数定义方式

let hiButton2 = (id) =>{ //通过在箭头函数添加形参的方式传入值

console.log("click Button2!, id is ", id)

}

}

})

</script>