vue v-on
內(nèi)聯(lián)代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<button v-on:click="count++">+</button>
<div>{{ count }}</div>
<button @click="count--">-</button>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
count: 100,
}
})
</script>
</body>
</html>
運(yùn)行效果
methods方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
<div id="app">
<button @click="fn"> 切換顯示 </button>
<p v-show='isShow'> Hello </p>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
isShow: true,
},
methods: {
fn() {
this.isShow = !this.isShow;
},
}
})
</script>
</body>
</html>
帶參數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<h3>小黑自動(dòng)售貨機(jī)</h3>
<button @click="buy(5)">可樂5元</button>
<button @click="buy(10)">咖啡10元</button>
<button @click="buy(8)">牛奶8元</button>
<p>銀行卡余額：{{ money }}元</p>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.14/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
money: 100,
},
methods: {
buy(price) {
this.money -= price
},
}
})
</script>
</body>
</html>
演示文章來源：http://www.zghlxwxcb.cn/news/detail-686857.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-686857.html
到了這里，關(guān)于vue v-on 艾特@的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Vue.js報(bào)錯(cuò)問題解決：[Vue warn]: Error in v-on handler: “ReferenceError: XXX is not defined“.](https://imgs.yssmx.com/Uploads/2024/02/540174-1.jpeg)
![[Vue warn]: Error in v-on handler: “TypeError: Cannot read properties of undefined (reading ‘$refs‘)](https://imgs.yssmx.com/Uploads/2024/01/799764-1.png)
![[HTML]Web前端開發(fā)技術(shù)26（HTML5、CSS3、JavaScript ）JavaScript基礎(chǔ)——喵喵畫網(wǎng)頁](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
