vue-computed 计算属性

最新推荐文章于 2023-08-27 21:28:22 发布
最新推荐文章于 2023-08-27 21:28:22 发布
阅读量104 收藏
点赞数
文章标签： json javascript ViewUI
原文链接：http://www.cnblogs.com/MR-cui/p/10175452.html
版权 
<!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

asd2014916
关注
Vue3 - computed 计算属性（详细教程）
王佳斌
11-16 9783
Vue.js 官方文档，vue3 计算属性官方文档教程，vue3.0computed计算属性，前端之vue3计算属性computed，vue computed项目实战，vue3快速入门-computed计算属性，vue3学习之计算属性computed，Vue3.x computed函数---计算属性，vue3的计算属性computed，Vue3使用计算属性 computed，在vue3 中, computed 计算属性性能问题，Vue3 计算属性 | 菜鸟教程，Vue3 - computed 计算属性（详细
Vue全家桶:vue2+vue3全部搞懂：第四篇，Vue的计算属性，高效执行运算
最新发布
m0_73991249的博客
03-01 584
这一专栏知识将一次性将vue、、vue3全部讲明白。
Day34：待办事项项目与组件化脚手架
albedo_102的博客
08-27 63
使用对象名绑定样式 :class="classObj" data: { classObj:{'plum':false,'green':true} },class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。数组绑定 :class='数组' 数组元素的值需要和类名相一致。组件化——对视图的拆分，能将大的视图拆分成更小的单元。
工作经验总结之 Eslint 报错和开发技巧。
徐飞的博客
06-28 2046
error Expected to return a value in “btnName1” computed property。btnName1 和 typeName 语句中没有 default默认值 ,因此如果都无法匹配的话，那就没有返回值。
vue-async-computed：Vue.js的异步计算属性
02-06
使用此插件，您可以在Vue中具有异步计算的计算属性。 如果不使用此插件，则无法执行以下操作： new Vue ( { data : { userId : 1 } , computed : { username ( ) { // Using vue-resource return Vue . ...
vue-async-computed, Vue.js的异步计算属性.zip
09-17
vue-async-computed, Vue.js的异步计算属性 vue-async-computed 这里插件的为Vue兼容 ！ 可以使用这个插件在Vue中计算出异步计算的属性。不使用这里插件，你无法执行这里操作：new Vue({ data: { us
vue-computed计算属性
weixin_41993525的博客
01-06 221
vue-computed计算属性 计算属性 官方文档场景解释： 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message 的翻转字符串。当你想要在模板中的多处包含此翻转字符串时，就会更加难
vue-async-properties:vue组件的智能异步数据和计算属性
05-02
Vue组件插件，用于异步数据和计算属性。 市场营销项目 new Vue ( { props : { articleId : Number } , asyncData : { article ( ) { return this . axios . get ( `/articles/ ${ this . articleId } ` ) }...
Vue中computed用法
sunshineTing2的博客
04-23 8万+
一、 computed是什么？ 对于任何复杂逻辑，你都应当使用计算属性。 computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义. 然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理； computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化， 举例：总金额=价...
Vue 中计算属性实现动态循环出的多个 select 不能重复选择相同的数据
qq_41377167的博客
03-22 2717
Vue 中计算属性实现动态循环出的多个 select 不能重复选择相同的数据前言实现逻辑核心代码1.结构2.数据3.方法4.计算属性总结 前言 通过计算属性return的值可以保证相对独立，又可以在其依赖的属性的值发生变化时进行重新计算。 实现逻辑 具体的实现逻辑我写在了代码的注释里了，这里就写下核心的逻辑） 1.保证每个下拉框的Option循环的cityList都是独立的，不会影响到其他的下拉框 2.把所有Select已经选中的选项放入一个数组arr中 3.所有的Option的显示数据cityList
Vue的computed计算属性的使用和一些事件绑定用法
sober
12-23 3902
一. 计算属性 模板内的表达式非常便利，但是设计他的初中是用于简单的计算，在模板中放入过多的逻辑会让模板过重难以维护。 例如 <div> {{message.splic(' ').reverse().join('')}} </div> 就像上面的代码，你必须看一段时间，才能意识到，这是想要对message的反转字符串。 所以，对于任何复杂的逻辑，你都应当使用计算属性 1.1. 计算属性的本质 fullname: {set(), get()} 例子： var vm = n
vue computed正确使用方式
热门推荐
李刚的学习专栏
07-03 12万+
最近面试中，遇到一个小伙子，谈到了vue中的 computed 和 watch 区别，最后得到了一个让我瞠目结舌的答案，只用 watch，从不用 computed 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护，所以，对于复杂逻辑，vue 提倡使用计算属性。需要特别说明：计算属性的 getter 函数是没有副作用 (side effec...
vue 配置公共头部(header)
周家大小姐
01-07 2万+
需求:整个项目;每个项目都有头部 但是内容不一样;这种情况我们可以考虑在app.vue中创建公共头部; App.vue &lt;template&gt; &lt;div id="app"&gt; &lt;div class="header" v-if="isShowHeader" id="headers"&gt; &lt
vue key值的重复键问题报错
weixin_30764137的博客
01-26 1636
1.问题描述：在vue2.0+ 中做一个公用的评论组件，:key使用的时创建评论的时间，当加载更多的时候，会报错： Duplicate keys detected: '2019-01-24T07:15:35.000Z'.This may cause an update error. 2. 出问题的代码部分： <li v-for="(item, i) in cmtList"...
vue 动态生成 el-checkbox-group 遇到的v-model绑定问题及解决方法
weixin_30684743的博客
01-10 3863
在制作一个根据props传入值来动态生成未知个数的el-checkbox-group时: <template> <div > <el-checkbox-group v-for="(items,key) in queryData" v-model="checked[key]" @change="handleChange"> &l...
Vue中的computed属性
weixin_34097242的博客
08-16 1963
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 报错： [Vue warn]: Computed property "checkall" was assigned to but it has no setter.
qq_35176916的博客
01-19 1万+
报错如图： 报错原因： computed:{ checkall:{ //购物车与checked数量一致时，全选为true get(){ return this.cartCheckedCount===this.items.length; } } } 分析： 该报错是和computed联系在一起的，我们知道computed动态...
vue-async-computed.js的异步计算属性
09-07
vue-async-computed.js是一个用于Vue.js的库，它扩展了Vue中的计算属性功能，使之可以支持异步数据获取和计算。 Vue.js计算属性是在模板中根据数据的变化实时计算出新的结果，并实时更新到视图中。然而，在某些情况...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值