zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    Android 9.0版本及以上开发时遇到的一些版本问题
    【经典】半平面交求解方程组——poj1755
    【模板】凸包向内推进求不严格的半平面交——poj3384
    二分+半平面交——poj1279
    AngularJS 启程
    全栈工程师--这才是真正的从入门到跑路
    数据库学习路线-从入门到入土
    java学习路线-从入门到入土
    前端路线-从入门到入土
    前端小练习
  • 原文地址：https://www.cnblogs.com/MR-cui/p/10175452.html
Copyright © 2011-2022 走看看