vue中computed与watch的使用

1、事件函数
vue中使用事件指令定义事件，@事件名="执行事件的函数";或者@事件名="执行事件的函数(参数)";
在vue实例中事件函数是写在methods中的，如methods:{ 事件函数名(参数){ //函数体 }}
注意：methods是与el和data同级的属性。

看看示例：
页面一开始打开先显示原始数据，三个按钮"全部"或"男"或"女"按钮后，筛选对应的数据显示到页面。

 <style>
      #btnAll button{
   
          width: 50px;
          background-color: lightblue;
      }
      .addColor{
   
          background-color: red;
      }
      #list li{
   
          list-style-type: decimal;
      }
 </style>

 <div id="app">
     <div id="btnAll">
         <!-- 判断用户点击的gender属性值是谁，哪个为true，哪个按钮就变色 -->
         <button :class="{addColor:gender===''}" @click="getUsers('')">全部</button>
         <button :class="{addColor:gender==='男'}" @click="getUsers('男')">男</button>
         <button :class="{addColor:gender==='女'}" @click="getUsers('女')">女</button>
     </div> 
     <hr>
     <ul id="list">
         -<!--<li v-for="user of users">-->
         <li v-for="user of showUsers">
            {
  {user.username}}
         </li>
     </ul>
 </div>

    <script src="js/vue.js"></script>
    <script>
         // 我们来准备一些数据(实际应用中，数据是从数据库中获取的)，这里自己手写的数据是用来测试的
         let users = [
             {
   id:1,username:"Tom",gender:"男"},
             {
   id:2,username:"Marry",gender:"女"},
             {
   id:3,username:"Lucy",gender:"女"},
             {
   id:4,username:"Jone",gender:"男"},
             {
   id:5,username:"Jike",gender:"男"},
             {
   id:6,username:"Lulu",gender:"女"},
             {
   id:7,username:"Sara",gender:"女"}
         ];
         // 实例化vue对象
         let app = new Vue({
   
             el:"#app",
             data:{
   
                // users中存原数据
                users,
                // showUsers中存放在原数据上处理后得到的数据(计算属性)
                // 页面一打开显示原始数据,当点击三个不同的按钮时，再在原数据的基础上筛选符合条件的数据
                showUsers:users,
                // 判断gender的值
                gender:""
             },
             methods:{
   
                 getUsers(gender){
   
                     // 传入gender属性值
                     this.gender = gender;
                     // 这样直接在原数据上操作，会改变原数据的值，比如用户点击"男"按钮后，
                     // 再点"女"按钮后，只是在上一次筛选后的结果中再次筛选，
                     // 即在user的gender为"男"的数据中,去筛选gender为"女"的数据，肯定获取不到了。
                     //  if (gender==="") {
   
                     //     this.users = users;
                     //  }
                     //  else{ 
                     //     this.users = this.users.filter(user=>user.gender===gender);
                     //  }
                     
                     // 这样先把数据再复制一份存到showUsers中，不会修改原数据，
                     // 把每次操作的结果存到showUsers中，不会出现如上的问题了
                     if (gender==="") {
   // 当gender为空时，即点击了"全部"按钮时，返回原数据
                        this.showUsers = this.users;
                     }
                     else{
    // 点击"男"或"女"按钮时,在原数据上经过筛选后再返回新数据
                        this.showUsers = this.users.filter(user=>user.gender==&#