vue實現(xiàn)計數(shù)器簡單制作
更新時間：2021年06月24日 15:33:51 作者：A_Lzexin
這篇文章主要為大家詳細介紹了vue實現(xiàn)計數(shù)器簡單制作，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)計數(shù)器簡單實現(xiàn)代碼，供大家參考，具體內容如下
過程注意事項
- 創(chuàng)建vue實例時：el（掛載點）data（數(shù)據(jù)）methods（方法）。
- v-on指令得作用是綁定事件，簡寫為@。
- 方法中通過this關鍵字獲取data中的數(shù)據(jù)。
- v-text指令的作用是：設置元素的文本值，簡寫為{{}}。
- v-html指令的作用是：設置元素的innerHTML。
實際代碼與截圖
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>計數(shù)器</title>
</head>
<body>
<div id="app">
<!--計數(shù)器功能區(qū)域-->
<div class="input-num">
<button @click="sub">
-
</button>
<span>{{num}}</span>
<button @click="add">
+
</button>
</div>
</div>
<!-- 開發(fā)環(huán)境版本，包含了有幫助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//vue實例
var app = new Vue({
el:"#app",
data: {
num:1
},
methods: {
add:function(){
//console.log('add')
if(this.num<10){
this.num++;
}else{
alert('別點啦，最大了！');
}
},
sub:function(){
//console.log('sub')
if(this.num>0){
this.num--;
}else{
alert('別點啦，最小了！');
}
}
},
})
</script>
</body>
</html>
關于vue.js組件的教程，請大家點擊專題vue.js組件學習教程進行學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Vue清除定時器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時器setInterval優(yōu)化方案分享，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法
在el-form表單組件中el-input組件輸入內容后按下Enter鍵刷新了整個頁面,下面這篇文章主要給大家介紹了關于Element?plus中el-input框回車觸發(fā)頁面刷新問題以及解決辦法,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue富文本框（插入文本、圖片、視頻）的使用及問題小結,需要的朋友可以參考下2018-08-08
這篇文章主要為大家整理了Vue3的8種和Vue2的12種組件通信的使用方法，文中的示例代碼講解詳細，對我們學習Vue有一定的幫助，值得收藏2023-04-04
vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作
這篇文章主要介紹了vue打包通過image-webpack-loader插件對圖片壓縮優(yōu)化操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要介紹了如何利用vue3定制復雜組件的滾動條，文中通過示例代碼講解詳細，需要的朋友們下面就跟隨小編來一起學習學習吧2023-04-04
Vue框架很核心的功能就是雙向的數(shù)據(jù)綁定。下面這篇文章主要給大家介紹了關于Vue.js中數(shù)據(jù)綁定的語法教程，文中通過示例代碼介紹的非常詳細，相信對大家具有一的參考學習價值，需要的朋友們下面來一起看看吧。2017-06-06
當我們談論Vue的組件擴展時,經(jīng)常會遇到mixin和extends這兩個關鍵詞,它們提供了一種有效的方式來共享和重用組件邏輯,本文將深入探討Vue中mixin和extends的使用方法,并詳細探討它們的覆蓋邏輯,以便你在實際項目中能夠更好地應用它們2023-08-08
在?vue?里我們可以通過全局事件總線來實現(xiàn)任意組件之間通信，它的原理是給?Vue?的原型對象上面添加一個屬性。這樣的話我所有組件的都可以訪問到這個屬性，然后可以通過這個屬性來訪問其他組件給這個屬性上面綁定的一些方法，從而去傳遞數(shù)據(jù)2022-08-08
本文主要給大家介紹基于vue的分頁原生寫法，代碼分為html部分和js部分，簡單易懂，非常不錯，具有參考借鑒價值，需要的朋友參考下吧2018-03-03