欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

vue之计算属性和侦听器

程序员文章站 2022-05-17 07:51:11
...

1、代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-products</title>
    
    <style type="text/css">
        table{
            border: 1px solid springgreen;
            width: 100%;
            border-collapse: collapse;
        }
        table th,td{
         border: 1px solid springgreen;
         text-align: center;
        }
     </style>
</head>
<body>

    <div id="app">
     <h1>Vue.js之商品查询 {{checkItems}}</h1>
          <fieldset>
              <legend>商品搜索</legend>
              名称:<input type="text" v-model="query.name"  placeholder="请输入商品名称"/>
              类型:<select v-model="query.spuId">
                  <option value="-1">请选择</option>
                  <option value="1">小米手机</option>
                  <option value="2">红米手机</option>
              </select>
              <button type="button" v-on:click="search">搜索</button>
          </fieldset>

          <fieldset>
              <button type="button" v-on:click="dels">批量删除</button>
              <button type="button">添加商品</button>商品的总价值是：{{addPrice}}
              商品的总数是：{{altogetherProducts}}
          </fieldset>
      <table id="tbl">
        <thead>
            <tr>
                <th>
                    全选
                    <input type="checkbox" v-model="checked"    name="all" id="all" @change="AllChecked"/>
                </th>
                <th>序号</th>
                <th>编号</th>
                <th>名称</th>
                <th>图片</th>
                <th>价格</th>
                <th>类型</th>
                <th>删除</th>
            </tr>
         </thead>

         <tbody>
             <!--创造一个模板-->
             <tr v-for="(p,index) in products" :key="p.id">
                 <td>
                     <input type="checkbox" v-bind:value="p.id" v-model="checkItems"/>
                 </td>
                 <td>{{index+1}}</td>
                 <td>{{p.id}}</td>

                 <td>{{p.name}}</td>

                 <td>
                     <img style="width:150px;height:150px" :src="'http://123.57.7.108:81/'+p.image"/> 
                    </td>
                 <td>
                     {{p.price}}$
                    </td>

                 <td>
                     <span v-if="p.spuId==1">
                         小米手机
                     </span>

                     <span v-if="p.spuId==2">
                        红米手机
                     </span>

                     <span v-if="p.spuId==3">
                        华为手机
                     </span>

                     <span v-if="p.spuId==2">
                        朵唯手机
                    </span>
                </td>

                 <td>
                    <span @click="del(p.id)">删除</span>
                 </td>

             </tr>
         </tbody>
       </table>
   </div>


   <script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
   <script type="text/javascript">
      var vue=new Vue({
        el:"#app",
        data:{
            products:[],
            query:{
                name:"",
                spuId:"-1"
            },
            checkItems:[],
            checked:false
        },
        created(){
            //再Vue的生命周期中，当Vue实例创造完完毕之后就调用的方法
            //我真的很想你，但是我们之间好像存在好多东西挡住了什么，所以我决定忘记你，再见
            this.init();
        },

        computed:{
            //计算属性区域
            addPrice:function(){
                var sumPrice =0;
                for(let i=0;i<this.products.length;i++){
                    sumPrice +=this.products[i].price;
                }
                return sumPrice;
            },

            altogetherProducts:function(){
                return this.products.length;
            }
        },

        watch:{
             //侦听区域
             checkItems:function(){//这里面还可以传参数
                 if(this.checkItems.length!=this.products.length){
                     if(this.checked){
                        this.checked=false;
                     }
                 }
             }
        },
        methods:{
            init:function(){
                //页面加载的时候就调用Ajax请求数据
                //alert("开始加载数据");
                var _this=this;
                 $.ajax({
                  type:"get",
                  dataType:"json",
                  url:"http://123.57.7.108:83/product.json",
                  cache:false,
                  success(data){
                     //this.products=data;在vue外面写this.可能无法识出具体指的是哪个products
                     _this.products=data;
                  }
              });
            },
            del:function(id){
               if(confirm("亲，你确定要删除吗？")){
                 for(let i=0;i<this.products.length;i++){
                     if(this.products[i].id==id){
                        this.products.splice(i,1);
                         break;
                       }
                   }
                }
             },

             search:function(){
                 alert("正在搜索商品:名称是"+this.query.name+",类型是"+this.query.spuId);
             },

             dels:function(){
                 alert("正在批量删除，参数已经在data中，用this.checkItems");
             },

             AllChecked:function(){
                 //我是如何被选中的，那就要再加一个属性v-on:click="boolearn"
                 this.checkItems=[];
                 if(this.checked){
                     //箭头函数没有this作用域的限制
                       this.products.forEach(element => {
                           this.checkItems.push(element.id);
                       }); 
                   }else{
                    this.checkItems=[];
                   }
                 }
             }
             
          }
      );
   </script>
</body>
</html>
相关标签： web前端 javaScript

上一篇： 坚果智慧墙O1发布：贴墙即可投100英寸

下一篇： vue3.0 watchEffect

推荐阅读