怎样算网站侵权,2022年度最火关键词,长沙网站排名提升,潍坊高端网站开发v-on
作用#xff1a;注册事件 添加监听 提供处理逻辑
语法#xff1a;
v-on:事件名内联语句
v-on:事件名methods中的函数名
注意#xff1a; v-on#xff1a;可以替换为
v-on:clickXXX -- cli…v-on
作用注册事件 添加监听 提供处理逻辑
语法
v-on:事件名内联语句
v-on:事件名methods中的函数名
注意 v-on可以替换为
v-on:clickXXX -- clickXXX
demo:
v-on:事件名内联语句的demo
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script --
/headbodydiv idappbutton v-on:clickcount---/buttonspan{{count}}/spanbutton v-on:clickcount/button!-- 可以赋值 --!-- button v-on:clickcountcount2/button --/divscript srcjs/vue.js/scriptscriptconst app new Vue({//通过el配置选择器指定Vue管理的是哪个盒子el: #app,//通过data提供数据data: {count:100}})/script
/body/html
页面效果图 v-on:事件名methods中的函数名的demo
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script --
/headbodydiv idappbutton clickfn切换显示隐藏/buttonh1 v-showisShowDemo/h1/divscript srcjs/vue.js/scriptscriptconst app new Vue({//通过el配置选择器指定Vue管理的是哪个盒子el: #app,//通过data提供数据data: {isShow:true},methods:{fn(){console.log(执行了fn)}}})/script
/body/html
页面效果 demo2
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#app {width: 500px;height: 400px;border: 2px solid #333;padding: 20px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}h2 {color: pink;font-size: 24px;margin-bottom: 20px;}button {padding: 10px 20px;font-size: 16px;border: none;border-radius: 4px;background-color: pink;color: black;cursor: pointer;margin-right: 10px;transition: background-color 0.3s ease;}button:hover {background-color: yellow;}/style!-- script srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/script --
/headbodydiv idapph2自动售卖机/h2button clickbuy(3)可乐 3 元/buttonbutton clickbuy(10)咖啡 10 元/buttonbutton clickbuy(5)牛奶 5 元/button/divscript srcjs/vue.js/scriptscriptconst app new Vue({el: #app,data: {money: 100},methods: {buy(price) {console.log(消费了 price 元);this.money - price;}}});/script
/body/html
页面效果
