尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

9.vue指令5

9.vue指令5 内容指令-v-on-02-语法2-methods处理函数作用提供方法处理复杂任务输入第一步加入数据第二步加入方法methods:{ fn () { app.isshow !app.isshow } }注意data和methods中间要用,隔开函数fn前加入内容要先用()再{内容}函数访问数据要先添加实例如app.isshow重复相反加app.isshow !app.isshow第三步添加标签button clickfn切换显示隐藏/button h1 v-showisshow杜清华/h1注意使用方法要写具体方法不能直接用methods格式内联语句(methods)函数fn显示总结!DOCTYPE html html langen head meta charsetUTF-8 meta http-equivX-UA-Compatible contentIEedge meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title /head body !-- 创建 -- div idapp button clickfn切换显示隐藏/button h1 v-showisshow杜清华/h1 /div script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script script const app new Vue({ el:#app, data:{ isshow:true }, methods:{ fn () { app.isshow !app.isshow } } }) /script /body /html补充this当改变实例名this可让methods中的所有函数this都指向当前实例具体改变函数中的实例名为this此时改变实例名仍能正常输出注意el中仍为app
返回列表