快捷導(dǎo)航

vue實現(xiàn)組件值的累加

更新時間：2022年09月01日 10:56:37 作者：依賴_賴

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)組件值的累加，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了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>點(diǎn)贊總數(shù){{sum}}</span>
? ? ? ? //點(diǎn)贊總數(shù)遞增的按鈕，隱藏該按鈕
? ? ? ? <button @click="clickSum" id="sumZan">點(diǎn)贊</button>
? ? ? ? <p></p>
? ? ? ?<!--
? ? ? ? ? ? myfun是自定義函數(shù)，命名不能出現(xiàn)大寫字母，因為事件監(jiān)聽器在 DOM 模板中會被自動轉(zhuǎn)換為全小寫
? ? ? ? ? ? color是自定義屬性，改變字體顏色
? ? ? ? ? ? msg是自定義按鈕值
? ? -->
? ? ? ??? ? <ui-btn @myfun="clickSum" msg="組長的點(diǎn)贊"></ui-btn>
? ??? ??? ? <ui-btn @myfun="clickSum" color="olive" msg="小小的點(diǎn)贊"></ui-btn>
? ??? ??? ? <ui-btn @myfun="clickSum" color="blue"></ui-btn>
? ? </div>

js代碼：

computed區(qū)別于method最重要的兩點(diǎn)
computed是屬性調(diào)用，而methods是函數(shù)調(diào)用
computed帶有緩存功能，而methods不是

<script src="../dist/vue.min.js"></script>
<script>
?? ?// 組件
? ? Vue.component("ui-btn",{/*ui-btn是自定義標(biāo)簽名*/
? ? ? ? template: ?`
? ? ? ? ? ? // html結(jié)構(gòu)
? ? ? ? ? ? <div id="myLit" :class="color">
? ? ? ? ? ? ? ? <p>點(diǎn)贊次數(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, //類型為字符串，若非字符串會自動轉(zhuǎn)換
? ? ? ? ? ? ? ? default:"red" //默認(rèn)值
? ? ? ? ? ? },
? ? ? ? ? ? msg:{
? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? default:"我的點(diǎn)贊"
? ? ? ? ? ? }
? ? ? ? }
? ? })
? ? // 實例
? ? var appBtn=new Vue({
? ? ? ? el:"#myBtn",//作用域，生命周期
? ? ? ? data:{//數(shù)據(jù)
? ? ? ? ? ? sum:0
? ? ? ? },
? ? ? ? computed:{//計算屬性
?? ??? ??? ??? ?
? ??? ??? ? },
? ? ? ? methods:{
? ? ? ? ? ? clickSum(){
? ? ? ? ? ? ? ? this.sum++
? ? ? ? ? ? }
? ? ? ? }
? ? })
</script>

頁面效果：