vue-computed 计算属性
2024-05-15 06:09:12
<!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 =0totalArr.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]=truearr.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><scrollerclass="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 = itemthis.dialogType = idthis.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
vue-computed 计算属性相关推荐
- 深入理解 Vue Computed 计算属性
Computed 计算属性是 Vue 中常用的一个功能,我们今天来说一下他的执行过长 拿官网简单的例子来看一下: <div id="example"><p> ...
- vue computed计算属性
文章目录 前言 一.计算属性介绍 二.使用步骤 1.template中绑定计算属性 2.script中定义计算属性 3.计算属性的配置项 4.计算属性的简写 总结 前言 Vue中的计算属性(comup ...
- 关于Vue中计算属性computed和methods属性的区别，你了解多少呢
文章目录 1.实例 2.computed计算属性中: 前提1.当计算属性fn2没有依赖data中的数据时: 前提2.:当计算属性依赖data中的数据时: 3.区别: 在做项目过程中,有时会出现同一个需 ...
- vue的computed计算属性学习
模板内的表达式是非常便利的,但是它们实际上只用于简单的运算.在模板中放入太多的逻辑会让模板过重且难以维护.这时候需要使用到vue的计算属性computed. 文件目录结构如下:利用vue脚手架创建 这 ...
- Vue中computed(计算属性)、methods、watch的区别
初学vue,阅读api后,发现Vue提供了多种逻辑处理的方法,单纯的方法methods,computed(计算属性)以及watch等,充分理解这三者的区别,才能写出更加健壮的Vue代码. 1.meth ...
- Vue的计算属性computed和监听属性watch
Vue的计算属性computed 定义 通过已有属性计算生成一个新的组合属性. 原理 底层借助了Object.defineproperty方法提供的getter和setter来实现. 性质 计算属性的 ...
- Vue中的computed计算属性
文章目录 computed与watch的异同 不同点 相同点 示例 源码 结果 分析 computed与watch的异同 不同点 触发条件不同 computed计算属性会依赖于使用它的data属性 ...
- Vue入门【三】-- 详解computed计算属性
目录 computed: ♡ ‧₊˚ 基本使用 ‧₊˚ ♡ ♡ ‧₊˚语法‧₊˚ ♡ ♡ ‧₊˚效果‧₊˚ ♡ ♡ ‧₊˚ 面试问点 ‧₊˚ ♡ computed与methods的区别: comput ...
- vue中计算属性computed传递参数
vue中computed计算属性无法直接进行传参,如果有传参数的需求可以使用闭包函数(也叫匿名函数)实现.例如传过来不同的状态,我们设置成不同的颜色.(三目运算符可以实现但是只能设置两种,状态多了就不 ...
- vue的计算属性computed
计算属性的应用场景 从已有的数据A中计算等到的新的数据B,使用计算属性 如果一个结果需要依赖data中的数据,但是需要经过一些逻辑处理,才能得到你想要的数据.此时就可以使用计算属性. 定义格式 计算属 ...
最新文章
- python数字加密解密_Python对整形数字进行加密和解密
- Apache Beam发布第一个稳定版本
- 在WPF程序中使用多线程技术
- case zhen语句_switch case语句，switch case用法详解
- javascript获取时间差
- poj 1704 HDU-4315 阶梯博弈
- Oracle 连接查询一
- e class connect.php,帝国CMS6.6程序剖析——e/class/connect.php
- 基于神念TGAM的脑波小车（4）
- 《21天学通C语言》总结(1)
- 稳重大气教师说课PPT模板
- 热门流量主小程序证件智能扫描A4系统开发
- Android 9.0 wifi 热点 汇总
- Python--基础语法知识
- linux java -cp lt; .txt_补交 20155202 蓝墨云班课 编写MyCP.java 实现类似Linux下cp XXX1 XXX2的功能...
- 倡导国稻种芯·中国水稻节 万祥军：农民丰收节金秋消费季
- vs2010c语言一闪而过,[转载]关于vs2010运行C程序时，运行结果窗口一闪而过的问题...
- vue如何实现在页面上画画_vue组件：canvas实现图片涂鸦功能
- 在虚拟环境下使用pip install -r requirements.txt导入项目依赖包却没有安装上出现的问题
- PVT的spatial reduction attention(SRA)