第八十一篇:Vue购物车(二) 名称,图片,价格的渲染
好家伙,
1,为组件封装属性,
需要封装以下属性:
需要定义的属性 | 属性名 | 值的类型 |
商品名 |
title | String |
商品图片 | pic | String |
商品价格 | price | Number |
是否勾选 | state | Boolean |
通过props为属性传值
上代码:
Goods.vue组件:
<template>
<div class="goods-container">
<!-- 左侧图片 -->
<div class="thumb">
<div class="custom-control custom-checkbox">
<!-- 复选框 -->
<input type="checkbox" class="custom-control-input" id="cb1" :checked="state" />
<label class="custom-control-label" for="cb1">
<!-- 商品的缩略图 -->
<img :src="pic" alt="" />
<img src="../../assets/1.jpg" alt=""> </label>
</div>
</div>
<!-- 右侧信息区域 -->
<div class="goods-info">
<!-- 商品标题 -->
<h6 class="goods-title">我的名字是:{{ title }}</h6>
<div class="goods-info-bottom">
<!-- 商品价格 -->
<span class="goods-price">{{ price }}¥</span>
<!-- 商品的数量 -->
</div>
</div>
</div>
</template> <script>
export default {
props:{
//商品名字
title:{
default:'',
type:String
},
//商品图片
pic:{
default:'',
type:String
},
//商品价格
price:{
default:0,
type:Number
},
//商品的勾选状态
state:{
default:false,
//是否勾选,所以是布尔值类型
type:Boolean
}
}
}
</script>
这里我们用一个插值表达式{{}}去拿到props中的值并把它渲染出来
来到App.vue这边
主要来看其中的组件调用部分
<Goods v-for="item in list"
:key="item.id"
:title="item.goods_name"
:pic="item.goods_img"
:price="item.goods_price"
:state="item.goods_stats"></Goods>
看看效果:
图片那块出了点bug
2.如何修改商品的勾选状态:
这里涉及到父子传值了
1.在子组件中,要监听复选框 状态变化的事件。拿到最新的勾选状态<input type="checkbox"@change="stateChange"/>
只要复选框的勾选状态发生了变化,会自动触发 change事件!
2.当监听到勾选状态变化之后,应该立即把最新的状态,通过自定义事件的形式,发送给父组件。
this.$emit('state-change', { id,value})
其中,id表示当前这件商品的id,value的值是最新的勾选状态
上代码:
App.vue中添加代码
<Goods v-for="item in list"
:key="item.id"
:id="item.id"
:title="item.goods_name"
:pic="item.goods_img"
:price="item.goods_price"
:state="item.goods_stats"
@state-change="getNewState"></Goods>
添加方法自定义方法:
methods:{
//封装请求列表数据的方法
//接受子组件传递过来的数据
//e的格式为{id,value}
getNewState(val){
console.log('父组件成功接受值')
this.list.some(item=>{
item.goods_state=e.value
//终止后续的循环
return true
})
}
},
Good.vue中添加代码
为复选框绑定方法:
<input type="checkbox"
class="custom-control-input"
id="cb1"
:checked="state"
@change="stateChange"/>
@change当input
添加自定义方法:
e.target.checked是勾选框的状态(true或false)
methods:{
stateChange(e){
const newState = e.target.checked
//触发自定义事件
this.$emit('state-change',{id:this.id,value:newState})
}
}
但是依旧有bug,比如点了第三个,第一个的勾选被取消了
我们绑个id来解决这个问题
Goods.vue中
<div class="custom-control custom-checkbox">
<!-- 复选框 -->
<input type="checkbox"
class="custom-control-input" //原先为id="cb"
:id="'cb'+id"
:checked="state"
@change="stateChange"/> //原先为for="cb"
<label class="custom-control-label" :for="'cb'+id">
<!-- 商品的缩略图 -->
<img :src="pic" alt="" />
<img src="../../assets/1.jpg" alt=""> </label>
</div>
搞定!
我得想想图片的bug怎么处理,
第八十一篇:Vue购物车(二) 名称,图片,价格的渲染的更多相关文章
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- Python学习二十八周(vue.js)
一.指令 1.一个例子简单实用vue: 下载vue.js(这里实用1.0.21版本) 编写html代码: <!DOCTYPE html> <html lang="en&qu ...
- {Python之线程} 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Threading模块 九 锁 十 信号量 十一 事件Event 十二 条件Condition(了解) 十三 定时器
Python之线程 线程 本节目录 一 背景知识 二 线程与进程的关系 三 线程的特点 四 线程的实际应用场景 五 内存中的线程 六 用户级线程和内核级线程(了解) 七 python与线程 八 Thr ...
- 《手把手教你》系列基础篇(八十一)-java+ selenium自动化测试-框架设计基础-TestNG如何暂停执行一些case(详解教程)
1.简介 在实际测试过程中,我们经常会遇到这样的情况,开发由于某些原因导致一些模块进度延后,而你的自动化测试脚本已经提前完成,这样就会有部分模块测试,有部分模块不能进行测试.这就需要我们暂时不让一些t ...
- Spring Cloud第十一篇 | 分布式配置中心高可用
本文是Spring Cloud专栏的第十一篇文章,了解前十篇文章内容有助于更好的理解本文: Spring Cloud第一篇 | Spring Cloud前言及其常用组件介绍概览 Spring Cl ...
- Python开发【第二十一篇】:Web框架之Django【基础】
Python开发[第二十一篇]:Web框架之Django[基础] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5237704.html Python之 ...
- BitAdminCore框架应用篇:(二)创建一个简单的增删改查模块
NET Core应用框架之BitAdminCore框架应用篇系列 框架演示:http://bit.bitdao.cn 框架源码:https://github.com/chenyinxin/cookie ...
- day 82 Vue学习二之vue结合项目简单使用、this指向问题
Vue学习二之vue结合项目简单使用.this指向问题 本节目录 一 阶段性项目流程梳理 二 vue切换图片 三 vue中使用ajax 四 vue实现音乐播放器 五 vue的计算属性和监听器 六 ...
- 孤荷凌寒自学python第八十一天学习爬取图片1
孤荷凌寒自学python第八十一天学习爬取图片1 (完整学习过程屏幕记录视频地址在文末) 通过前面十天的学习,我已经基本了解了通过requests模块来与网站服务器进行交互的方法,也知道了Beauti ...
随机推荐
- iNeuOS工业互联网操作系统,增加搜索应用、多数据源绑定、视图背景设置颜色、多级别文件夹、组合及拆分图元
目 录 1. 概述... 2 2. 搜索应用... 2 3. 多数据源绑定... 3 4. 视图背景设置颜色... 4 5. 多级别文件夹 ...
- JS:object
object:对象 1.对象是拥有属性和方法的数据,也是一个变量,但值有多个,以key-value的形式. 2.对象有继承属性: 每当创建一个对象,对象里面就会有一个原型对象prototype,可以从 ...
- 一篇文章带你使用Typescript封装一个Vue组件
一.搭建项目以及初始化配置 vue create ts_vue_btn 这里使用了vue CLI3自定义选择的服务,我选择了ts.stylus等工具.然后创建完项目之后,进入项目.使用快捷命令code ...
- dubbox、zookeeper BUG记录
主要错误信息: dubbo:com.alibaba.dubbo.rpc.RpcException: Failed to invoke the method... Caused by: com.alib ...
- RPA供应链管制单修改机器人
背景:供应链环节中,研发物料时而因为市场缺货等原因无法采购,资材部需登入系统修改物料管制单. 操作流程:登录PDM系统中读取数据.登录ERP系统中更新数据. 人工操作:每日耗时3.5小时,出现一定比例 ...
- RPA应用场景-产品主数据同步
场景概述 产品主数据同步 所涉系统名称 产品管理系统.SAP系统 人工操作(时间/次) 35分钟 所涉人工数量 3 操作频率 不定时 场景流程1.登录收购品牌产品管理系统 2.根据时间.产品分类等选择 ...
- 扩展新的WCV到标准的WC后,不能在业务角色里面看见视图解决方法
by zyi 感谢群主红枣的分享 1.把你的WCVIEW扩展进WC中 2.使用UI Designer打开你的WCVIEW 3.更改你的WCVIEW名字
- Future源码一观-JUC系列
背景介绍 在程序中,主线程启动一个子线程进行异步计算,主线程是不阻塞继续执行的,这点看起来是非常自然的,都已经选择启动子线程去异步执行了,主线程如果是阻塞的话,那还不如主线程自己去执行不就好了.那会不 ...
- 6 分钟看完 BGP 协议。
上一篇文章见 万字长文爆肝路由协议! 上面我们聊 RIP .OSPF 协议都是基于 AS 即自治系统内的协议,可以把它们认为是域内路由协议:而下面我们要聊的就是 AS 之间的协议了,这也叫做域间路由协 ...
- Random生成指定范围的随机数和对象数组
查看类 ~java.util.Random :该类需要 import导入使后使用. 查看构造方法 ~public Random() :创建一个新的随机数生成器. 查看成员方法 ~public int ...