vue-cli: v-on事件绑定 的用法

一. v-on事件绑定

<template>
  <div>
    <h1>v-on 事件的绑定</h1>
    <div>{{number}}</div>
    <!-- 标准写法 -->
    <button v-on:click="add">加1</button>
    <!-- 简写 -->
    <button @click="reduce">减1</button>
    <!-- 事件传递参数, $event 为事件对象 -->
    <button @click="reduce(2,$event)">减2</button>
 
    <hr>
 
    <div v-if="isShow">isSho is true</div>
    <div v-else>isSho is false</div>
    <button @click="toggle">切换isShow</button>
 
    <hr>
 
    <ul :style="{textAlign:'left'}">
      <li v-for="news in newsList" :key="news.id">{{news.title}}</li>
    </ul>
    <button @click="addNews">添加新闻</button>
    <button @click="removeNews">删除新闻</button>
    <button @click="updateNews">修改第一条新闻</button>
 
    <hr>
 
    <!-- v: value, k: key, i: index -->
    <div v-for="(v,k,i) in obj" :key="k">
      {{i}} -- {{k}} -- {{v}}
    </div>
    <button @click="addAttr()">add attr</button>
    <button @click="removeAttr()">reomve attr</button>
    <button @click="updateAttr()">update attr</button>
 
  </div>
</template>
 
<script>
export default {
  name: "demo5",
  data() {
    return {
      number: 1,
      isShow: true,
      newsList: [
        {
          id: 1,
          title: "新闻第1则"
        },
        {
          id: 2,
          title: "新闻第2则"
        },
        {
          id: 3,
          title: "新闻第3则"
        },
        {
          id: 4,
          title: "新闻第4则"
        }
      ],
      obj: {
        name: "zhangsan",
        age: "33",
        sex: "man"
      }
    };
  },
  methods: {
    add(event) {
      console.log(event);
      this.number++;
    },
    reduce(val, event) {
      console.log(event);
      if (typeof val === "number") {
        // 表示传递时数字类型"number", 不是字符串, 不是变量
        this.number -= val;
      } else {
        this.number--;
      }
    },
    toggle() {
      // 取反
      this.isShow = !this.isShow;
    },
    addNews() {
      this.newsList.unshift({ 
          id: Date.now(), // 当前时间
          title: "添加一条新新闻" 
        });
      // unshift 在数组前面插入一条
    },
    removeNews() {
      this.newsList.pop();
      // pop 删除最后一条, remove 删除第一条
    },
    updateNews() {
      // this.newsList[0].title = "修改了第一条新闻的标题",
      this.$set(this.newsList, 0, {
        id: Date.now(),
        title: "修改了第一条新闻"
      });
    },
    addAttr() {
      this.$set(this.obj, "吃饭，睡觉，撸啊撸");
    },
    removeAttr() {
      let _obj = { ...this.obj }; // 原生Js中定义对象, 将obj赋值给_obj, 
      delete _obj.age; // 从中删除对象中的属性
      this.obj = { ..._obj }; // 重新赋值, 曲线救国
    },
    updateAttr() {
      this.obj.age = 30; // 属性值直接修改
    }
  }
};
</script>