python做的網(wǎng)站公司seo
v-on
作用：注冊事件 = 添加監(jiān)聽 + 提供處理邏輯
語法：
v-on:事件名="內(nèi)聯(lián)語句"
v-on:事件名="methods中的函數(shù)名"
注意：" v-on："可以替換為" @ "
v-on:click="XXX" --> @click="XXX"
demo:
v-on:事件名="內(nèi)聯(lián)語句"的demo：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><button v-on:click="count--">-</button><span>{{count}}</span><button v-on:click="count++">+</button><!-- 可以賦值 --><!-- <button v-on:click="count=count+2">+</button> --></div><script src="js/vue.js"></script><script>const app = new Vue({//通過el配置選擇器，指定Vue管理的是哪個盒子el: '#app',//通過data提供數(shù)據(jù)data: {count:100}})</script>
</body></html>頁面效果圖：
v-on:事件名="methods中的函數(shù)名"的demo：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><button @click="fn">切換顯示隱藏</button><h1 v-show="isShow">Demo</h1></div><script src="js/vue.js"></script><script>const app = new Vue({//通過el配置選擇器，指定Vue管理的是哪個盒子el: '#app',//通過data提供數(shù)據(jù)data: {isShow:true},methods:{fn(){console.log('執(zhí)行了fn')}}})</script>
</body></html>頁面效果：
demo2：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#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 src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script> -->
</head><body><div id="app"><h2>自動售賣機</h2><button @click="buy(3)">可樂 3 元</button><button @click="buy(10)">咖啡 10 元</button><button @click="buy(5)">牛奶 5 元</button></div><script src="js/vue.js"></script><script>const app = new Vue({el: '#app',data: {money: 100},methods: {buy(price) {console.log('消費了' + price + '元');this.money -= price;}}});</script>
</body></html>頁面效果：
