Vue 本地应用-计数器
逻辑是在点击按钮的时候执行,那么要为按钮绑定点击事件,整体语法如下:
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>首页</title><link href="" type="text/css" rel="stylesheet"/><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><style type="text/css"></style>
</head><body> <!--准备一个容器-->
<div id="app"><div class="input-num"><button type="button" @click="sub">-</button><span>{{ num }}</span><button type="button" @click="add">+</button></div><div><img src="https://p0.itc.cn/q_70/images01/20220406/a01312d86b8745619e2ed0075d1c1635.png" alt=""></div></div><script type="text/javascript">new Vue({ el: "#app", data:{ num: 1},methods:{add:function(){if (this.num < 10){this.num ++}else{alert("别点了,最大了")}},sub:function(){if (this.num >0){this.num --}else{alert("别点了,最小了")}}}})</script></body>
</html>