vue實現(xiàn)組件值的累加
更新時間：2022年09月01日 10:56:37 作者：依賴_賴
這篇文章主要為大家詳細介紹了vue實現(xiàn)組件值的累加，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)組件值的累加的具體代碼，供大家參考，具體內(nèi)容如下
css代碼：
<style>
? ? ? ? #myLit{
? ? ? ? ? ? border: 1px solid red;
? ? ? ? ? ? width: 100px;
? ? ? ? ? ? float: left;
? ? ? ? ? ? margin-right: 20px;
? ? ? ? }
? ? ? ? //定義不同的顏色類
? ? ? ? .red{
? ? ? ? ? ? color: red;
? ? ? ? }
? ? ? ? .olive{
? ? ? ? ? ? color: olive;
? ? ? ? }
? ? ? ? .blue{
? ? ? ? ? ? color: blue;
? ? ? ? }
</style>html代碼：
<div id="myBtn">
? ? ? ? <span>點贊總數(shù){{sum}}</span>
? ? ? ? //點贊總數(shù)遞增的按鈕，隱藏該按鈕
? ? ? ? <button @click="clickSum" id="sumZan">點贊</button>
? ? ? ? <p></p>
? ? ? ?<!--
? ? ? ? ? ? myfun是自定義函數(shù)，命名不能出現(xiàn)大寫字母，因為事件監(jiān)聽器在 DOM 模板中會被自動轉換為全小寫
? ? ? ? ? ? color是自定義屬性，改變字體顏色
? ? ? ? ? ? msg是自定義按鈕值
? ? -->
? ? ? ??? ? <ui-btn @myfun="clickSum" msg="組長的點贊"></ui-btn>
? ??? ??? ? <ui-btn @myfun="clickSum" color="olive" msg="小小的點贊"></ui-btn>
? ??? ??? ? <ui-btn @myfun="clickSum" color="blue"></ui-btn>
? ? </div>js代碼：
computed區(qū)別于method最重要的兩點
computed是屬性調(diào)用，而methods是函數(shù)調(diào)用
computed帶有緩存功能，而methods不是
<script src="../dist/vue.min.js"></script>
<script>
?? ?// 組件
? ? Vue.component("ui-btn",{/*ui-btn是自定義標簽名*/
? ? ? ? template: ?`
? ? ? ? ? ? // html結構
? ? ? ? ? ? <div id="myLit" :class="color">
? ? ? ? ? ? ? ? <p>點贊次數(shù){{count}}</p>
? ? ? ? ? ? ? ? <button @click="countFun">{{msg}}</button>
? ? ? ? ? ? </div>
? ? ? ? `,
? ? ? ? data:function () {
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? // 組件里所要用到的數(shù)據(jù)
? ? ? ? ? ? ? ? count:0,
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods:{
? ? ? ? ? ? countFun(){
? ? ? ? ? ? ? ? this.count++;
? ? ? ? ? ? ? ? // 模擬觸發(fā)sumCount函數(shù)，這里實際上就是去觸發(fā)自定義事件
? ? ? ? ? ? ? ? this.$emit("myfun")
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? props:{
? ? ? ? ? ? color:{
? ? ? ? ? ? ? ? type:String, //類型為字符串，若非字符串會自動轉換
? ? ? ? ? ? ? ? default:"red" //默認值
? ? ? ? ? ? },
? ? ? ? ? ? msg:{
? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? default:"我的點贊"
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? // 實例
? ? var appBtn=new Vue({
? ? ? ? el:"#myBtn",//作用域，生命周期
? ? ? ? data:{//數(shù)據(jù)
? ? ? ? ? ? sum:0
? ? ? ? },
? ? ? ? computed:{//計算屬性
?? ??? ??? ??? ?
? ??? ??? ? },
? ? ? ? methods:{
? ? ? ? ? ? clickSum(){
? ? ? ? ? ? ? ? this.sum++
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>頁面效果：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
vue3的watch用法以及和vue2中watch的區(qū)別
這篇文章主要介紹了vue3的watch用法以及和vue2中watch的區(qū)別，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
Element-ui設置el-table表頭全選框隱藏或禁用
這篇文章主要給大家介紹了關于Element-ui設置el-table表頭全選框隱藏或禁用的相關資料,文中手把手教你實現(xiàn)el-table實現(xiàn)跨表格禁用選項,需要的朋友可以參考下2023-07-07
大屏數(shù)字滾動翻轉效果來源于最近工作中element后臺管理頁面一張大屏的UI圖，該UI圖上有一個模塊需要有數(shù)字往上翻動的效果。本文通過截圖代碼的形式給大家介紹Vue.js實現(xiàn)大屏數(shù)字滾動翻轉效果，感興趣的朋友一起看看吧2019-11-11
這篇文章主要介紹了vue常用組件之confirm用法及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了Vue中如何使用base64編碼和解碼問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
下面小編就為大家分享一篇vue axios 在頁面切換時中斷請求方法 ajax，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue?Router?實現(xiàn)登錄后跳轉到之前想要訪問的頁面
這篇文章主要介紹了Vue?Router?實現(xiàn)登錄后跳轉到之前相要訪問的頁面,本文僅演示路由跳轉和導航守衛(wèi)相關代碼的實現(xiàn)，不包含具體的權限驗證和登錄請求，需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了vuex實現(xiàn)一個簡易計數(shù)器，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了vue移動端時彈出側邊抽屜菜單,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
本文主要介紹了vue雙向數(shù)據(jù)綁定的原理，文章結尾附上完整demo下載。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01