vue实现组件值的累加

本文实例为大家分享了vue实现组件值的累加的具体代码，供大家参考，具体内容如下css代码：style#myLit{border:1pxsolidred;...

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

css代码：

<style>
    #myLit{
      border: 1px solid red;
      width: 100px;
      float: lefIkbllxXsxMt;
      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="olandroidive" msg="小小的点赞"></ui-btn>
    <ui-btn @myfun="clickSum" color="blue"></ui-btn>
  </div>

js代码：

computed区别于method最重要的两点
computed是属性调用，而methods是函数调用
comput^{androided带有缓存功能，而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:{
js      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>

页面效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。