vue-computed 计算属性

<!DOCTYPE html>
<html>
<head>
    <title>123</title>
</head>
<body>
   <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<div id="app">
  <div>
   <div>
      全选
      <input type="checkbox"  v-model='ischeckAll' name="">
   </div>
      <ul>
         <li v-for="item in objects">
            <span>{{item.name}}</span>
            <input type="checkbox" v-model="item.checked" name="">
         </li>

      </ul>
      <div>
         <b>选中成员：{{total}}</b>
                  <b>选中数量：{{totalCount}}</b>

      </div>
  </div>

</div>

    <script type="text/javascript">
      
            let obj=[
         {
            name:"崔1",            num:1,

            checked:true
         },
          {
            name:"崔2"
            ,            num:1,

            checked:true
         },
          {
            name:"崔3"
            ,            num:1,

            checked:true
         },
          {
            name:"崔1"
            ,            num:1,

            checked:true
         },
          {
            name:"崔2"
            ,            num:1,

            checked:true
         },
          {
            name:"崔2"
            ,            num:1,

            checked:true
         },
          {            num:1,

            name:"崔2",
            checked:true
         }, {
            name:"崔2",            num:1,

            checked:true
         },
          {
            name:"崔2",            num:1,

            checked:true
         },
          {
            name:"崔2",            num:1,

            checked:true
         },
          {
            name:"崔4",
                        num:1,

            checked:true
         },
          {
            name:"崔3",
            num:1,
            checked:true
         },
      ]
      var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    objects:obj,
    ischeck:false
  },
  computed:{
      total(){
        return this.removeDuplicatedItem(this.objects.filter(item=>item.checked)).length
      },
      totalCount(){
         let totalArr=this.objects.filter(item=>item.checked)
         let num =0
         totalArr.map(item=>{
            num +=item.num
         })
         return num
      },
      ischeckAll:{
         get(){
           return this.objects.every(item=>item.checked)
         },
         set(nweValue){
            this.objects.forEach(item=>{
               item.checked=nweValue
            })
         }
      }
  },
  methods:{
      removeDuplicatedItem(option){
        let json={}
        let arr=[]
        for(let i=0;i<option.length;i++){
           let item = option[i]
            if(!json[item.name]){
               json[item.name]=true
               arr.push(item)
            }
        }
        return arr
      }
  }
})
    </script>
</body>
</html>








<template>
    <div class="chose-brand">
        <Headers @searchContent="getSearchContent" @editEv='editHandle'></Headers>
        <Popup @applicant='getApplicant' @brandType='getBrandType'></Popup>
        <div>
            <div class="section-title">
                <span class="brandname">商标名称</span>
                <span class="type">类别</span>
                <span class="price">价格</span>
            </div>
            <scroller
            class="scroller" 
            :on-infinite="infinite"
            ref="scroller"
            >
                <div v-for="(item,index) in list"   class="list">
                        <span v-if="item.price">
                            <input type="checkbox" :value="item" :id="'a'+index" v-model="item.checked">
                            <label :for="'a'+index"></label>
                        </span>
                        <span v-else @click="alert">
                            <label></label>
                        </span>
                        <span class="company">
                            {{item.company}}
                        </span>
                        <span class="type">
                            {{item.type}}
                        </span>
                        <span v-if="item.price" class="price">
                            {{item.price}}
                        </span>
                        <span v-else class="pricing" @click="openDialog(1,item)">
                            定价
                        </span>
                </div>
                <div style="height:200px">
                </div>
            </scroller>
        </div>
        <div class="bottom" v-if="totalCount > 0">
            <div class="left">
                <span>
                    <input type="checkbox" v-model="ischeckAll" id="all" >
                    <label for="all"></label>
                </span>
                <span class="all">全选</span>
                <span>共<span class="fc">{{totalCount}}</span>个商品</span>
            </div>
            <button v-if="showSetPrice" @click="openDialog(2)">设定价格</button>
            <router-link  v-if="!showSetPrice" class="right"  to='/selectBrand'>发布</router-link>
        </div>
        <!-- setPrice dialog -->
        <div class="dialog" v-if="hidMask">
            <input type="text" v-model="inputPrice" placeholder="请输入商标价格"/>
            <b class="price">(元)</b>
            <span class="cancel" @click="hidMask=false">取消</span>
            <span class="confirm" @click="confirm">确定</span>
        </div>
        <div class="mask" v-if="hidMask">

        </div>
    </div>
</template>

<script>
import '@/style/select-brand.scss'
import '@/style/trademark-registant.scss'
import Headers from '@/components/Header'
import Popup from '@/components/Popup'
export default {
    data(){
        return{
            certifyType:'certifyType',
            certifyTypeNo:'certifyTypeNo',
            list:[
                {   
                    id:1,
                    company:"1腾讯科技有限公司",
                    certifyType:"已认证",
                    num:"987",
                    type:"35类",
                    price:"1"
                },
                {   
                    id:1,
                    company:"1腾讯科技有限公司",
                    certifyType:"已认证",
                    num:"987",
                    type:"35类",
                    price:""
                },
                {   
                    id:1,
                    company:"1腾讯科技有限公司",
                    certifyType:"已认证",
                    num:"987",
                    type:"35类",
                    price:""
                },
                {   
                    id:1,
                    company:"1腾讯科技有限公司",
                    certifyType:"已认证",
                    num:"987",
                    type:"35类",
                    price:""
                },
                {   
                    id:1,
                    company:"1腾讯科技有限公司",
                    certifyType:"已认证",
                    num:"987",
                    type:"35类",
                    price:""
                },
            ],
            // 控制设定价格的遮罩的show hide
            hidMask:false,
            //控制底部设定价格的show hide
            showSetPrice:false,
            // 设定价格是由那个事件调起来 1是定价，2是设定价格
            dialogType:'',
            // 存放定价调起弹框存放的item
            dialogItem:"",
            inputPrice:""
        }
    },
    components:{
       Headers ,
       Popup
    },
    created(){
        this.list.forEach(item=>{
            this.$set(item,"checked",false)
        })
    },
    computed:{
        totalCount(){
            let totalArr = this.list.filter(item=>item.checked)
            return totalArr.length
        },
        ischeckAll:{
                get(){
                    var list = this.list.filter((item)=>{
                        return item.price
                    })
                    return list.every(item=>item.checked)
                },
                set(newValue){
                    this.list.filter((item)=>{
                        return item.price
                    }).forEach(item=>{
                        item.checked=newValue
                    })
                }
            }
    },
    methods:{
        // 接受popup组件 emit的申请人
        getApplicant(item){
            console.log(item)
        },
        // 接受popup组件 emit的尚标状态
        getBrandType(item){
            console.log(item)
        },  
        // 接受Header组件搜索emit 的内容
        getSearchContent(val){
            console.log(val,"search val")
        },
        // 接受Header组件 点击编辑emit 的内容
        editHandle(val){
            console.log(val,"edit");
            this.showSetPrice= val
        },
        // 调起设定价格弹框
        openDialog(id,item){
            this.dialogItem = item
            this.dialogType = id
            this.hidMask = true
        },
        confirm(){
            if(this.dialogType == '1'){
                this.dialogItem.price = this.inputPrice
            }else{
                this.list.forEach(item=>{
                    if(item.checked){
                        item.price = this.inputPrice
                    }
                })
            }
            this.hidMask = false
        },
        infinite: function (done) {
            if(this.list.length>10){
                done(true)
                console.log(456)
                this.$refs.scroller.finishInfinite(true)
                return
            }
            console.log(123)
            setTimeout(()=>{
                this.list.push(               
                {   
                    id:1,
                    company:"1213123",
                    certifyType:"已认证",
                    num:"987",
                    type:'35类',
                    price:""
                },)
                 done()
            },1000)
            
        },
        alert(){
            alert('您还没有设定价格哦')
        }
    }
}
</script>

<template>
<div class="chose-brand">
<Headers @searchContent="getSearchContent" @editEv='editHandle'></Headers>
<Popup @applicant='getApplicant' @brandType='getBrandType'></Popup>
<div>
<div class="section-title">
<span class="brandname">商标名称</span>
<span class="type">类别</span>
<span class="price">价格</span>
</div>
<scroller
class="scroller"
:on-infinite="infinite"
ref="scroller"
>
<div v-for="(item,index) in list" class="list">
<span v-if="item.price">
<input type="checkbox" :value="item" :id="'a'+index" v-model="item.checked">
<label :for="'a'+index"></label>
</span>
<span v-else @click="alert">
<label></label>
</span>
<span class="company">
{{item.company}}
</span>
<span class="type">
{{item.type}}
</span>
<span v-if="item.price" class="price">
{{item.price}}
</span>
<span v-else class="pricing" @click="openDialog(1,item)">
定价
</span>
</div>
<div style="height:200px">
</div>
</scroller>
</div>
<div class="bottom" v-if="totalCount > 0">
<div class="left">
<span>
<input type="checkbox" v-model="ischeckAll" id="all" >
<label for="all"></label>
</span>
<span class="all">全选</span>
<span>共<span class="fc">{{totalCount}}</span>个商品</span>
</div>
<button v-if="showSetPrice" @click="openDialog(2)">设定价格</button>
<router-link v-if="!showSetPrice" class="right" to='/selectBrand'>发布</router-link>
</div>
<!-- setPrice dialog -->
<div class="dialog" v-if="hidMask">
<input type="text" v-model="inputPrice" placeholder="请输入商标价格"/>
<b class="price">(元)</b>
<span class="cancel" @click="hidMask=false">取消</span>
<span class="confirm" @click="confirm">确定</span>
</div>
<div class="mask" v-if="hidMask">

</div>
</div>
</template>

<script>
import '@/style/select-brand.scss'
import '@/style/trademark-registant.scss'
import Headers from '@/components/Header'
import Popup from '@/components/Popup'
export default {
data(){
return{
certifyType:'certifyType',
certifyTypeNo:'certifyTypeNo',
list:[
{
id:1,
company:"1腾讯科技有限公司",
certifyType:"已认证",
num:"987",
type:"35类",
price:"1"
},
{
id:1,
company:"1腾讯科技有限公司",
certifyType:"已认证",
num:"987",
type:"35类",
price:""
},
{
id:1,
company:"1腾讯科技有限公司",
certifyType:"已认证",
num:"987",
type:"35类",
price:""
},
{
id:1,
company:"1腾讯科技有限公司",
certifyType:"已认证",
num:"987",
type:"35类",
price:""
},
{
id:1,
company:"1腾讯科技有限公司",
certifyType:"已认证",
num:"987",
type:"35类",
price:""
},
],
// 控制设定价格的遮罩的show hide
hidMask:false,
//控制底部设定价格的show hide
showSetPrice:false,
// 设定价格是由那个事件调起来 1是定价，2是设定价格
dialogType:'',
// 存放定价调起弹框存放的item
dialogItem:"",
inputPrice:""
}
},
components:{
Headers ,
Popup
},
created(){
this.list.forEach(item=>{
this.$set(item,"checked",false)
})
},
computed:{
totalCount(){
let totalArr = this.list.filter(item=>item.checked)
return totalArr.length
},
ischeckAll:{
get(){
var list = this.list.filter((item)=>{
return item.price
})
return list.every(item=>item.checked)
},
set(newValue){
this.list.filter((item)=>{
return item.price
}).forEach(item=>{
item.checked=newValue
})
}
}
},
methods:{
// 接受popup组件 emit的申请人
getApplicant(item){
console.log(item)
},
// 接受popup组件 emit的尚标状态
getBrandType(item){
console.log(item)
},
// 接受Header组件搜索emit 的内容
getSearchContent(val){
console.log(val,"search val")
},
// 接受Header组件 点击编辑emit 的内容
editHandle(val){
console.log(val,"edit");
this.showSetPrice= val
},
// 调起设定价格弹框
openDialog(id,item){
this.dialogItem = item
this.dialogType = id
this.hidMask = true
},
confirm(){
if(this.dialogType == '1'){
this.dialogItem.price = this.inputPrice
}else{
this.list.forEach(item=>{
if(item.checked){
item.price = this.inputPrice
}
})
}
this.hidMask = false
},
infinite: function (done) {
if(this.list.length>10){
done(true)
console.log(456)
this.$refs.scroller.finishInfinite(true)
return
}
console.log(123)
setTimeout(()=>{
this.list.push(
{
id:1,
company:"1213123",
certifyType:"已认证",
num:"987",
type:'35类',
price:""
},)
done()
},1000)
 
},
alert(){
alert('您还没有设定价格哦')
}
}
}
</script>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/MR-cui/p/10175452.html