在Vue中,methods选项中的一个方法可以调用methods中的另外一个方法,使用以下语法格式:
this.$options.methods.+方法名
【例3.6】方法之间的调用(源代码\ch03\3.6.html)。
<div id="app"> {{content}} {{way2()}} </div> <!--引入vue文件--> <script src="https://unpkg.com/vue@next"></script> <script> //创建一个应用程序实例 const vm= Vue.createApp({ //该函数返回数据对象 data(){ return{ content:"苹果" } }, //在选项对象的methods属性中定义方法 methods: { way1:function(){ alert("今日苹果的秒杀价是8.68元每公斤!"); }, way2:function(){ this.$options.methods.way1(); } } //在指定的DOM元素上装载应用程序实例的根组件 }).mount('#app'); </script>
在谷歌浏览器中运行程序,结果如图3-7所示。
图3-7 方法之间的调用