vue实现组件值的累加

Rachel ·
更新时间:2024-11-01
· 808 次阅读

本文实例为大家分享了vue实现组件值的累加的具体代码,供大家参考,具体内容如下

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>点赞总数{{sum}}</span>         //点赞总数递增的按钮,隐藏该按钮         <button @click="clickSum" id="sumZan">点赞</button>         <p></p>        <!--             myfun是自定义函数,命名不能出现大写字母,因为事件监听器在 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区别于method最重要的两点
computed是属性调用,而methods是函数调用
computed带有缓存功能,而methods不是

<script src="../dist/vue.min.js"></script> <script>     // 组件     Vue.component("ui-btn",{/*ui-btn是自定义标签名*/         template:  `             // html结构             <div id="myLit" :class="color">                 <p>点赞次数{{count}}</p>                 <button @click="countFun">{{msg}}</button>             </div>         `,         data:function () {             return {                 // 组件里所要用到的数据                 count:0,             }         },         methods:{             countFun(){                 this.count++;                 // 模拟触发sumCount函数,这里实际上就是去触发自定义事件                 this.$emit("myfun")             }         },         props:{             color:{                 type:String, //类型为字符串,若非字符串会自动转换                 default:"red" //默认值             },             msg:{                 type:String,                 default:"我的点赞"             }         }     })     // 实例     var appBtn=new Vue({         el:"#myBtn",//作用域,生命周期         data:{//数据             sum:0         },         computed:{//计算属性             },         methods:{             clickSum(){                 this.sum++             }         }     }) </script>

页面效果:



VUE

需要 登录 后方可回复, 如果你还没有账号请 注册新账号