前端笔记Vue项目day3(九)

 

5. 实现组件更新数据功能  下

  • 子组件通过一个标识符来标记对用的用户点击  + - 或者输入框输入的内容

  • 父组件拿到标识符更新对应的组件

  • [mw_shl_code=applescript,true]<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style type="text/css">
        .container {
        }
        .container .cart {
          width: 300px;
          margin: auto;
        }
        .container .title {
          background-color: lightblue;
          height: 40px;
          line-height: 40px;
          text-align: center;
          /*color: #fff;*/  
        }
        .container .total {
          background-color: #FFCE46;
          height: 50px;
          line-height: 50px;
          text-align: right;
        }
        .container .total button {
          margin: 0 10px;
          background-color: #DC4C40;
          height: 35px;
          width: 80px;
          border: 0;
        }[/mw_shl_code][mw_shl_code=applescript,true] .container .total span {      color: red;
          font-weight: bold;
        }
        .container .item {
          height: 55px;
          line-height: 55px;
          position: relative;
          border-top: 1px solid #ADD8E6;
        }
        .container .item img {
          width: 45px;
          height: 45px;
          margin: 5px;
        }
        .container .item .name {
          position: absolute;
          width: 90px;
          top: 0;left: 55px;
          font-size: 16px;
        }

        .container .item .change {
          width: 100px;
          position: absolute;
          top: 0;
          right: 50px;
        }
        .container .item .change a {
          font-size: 20px;
          width: 30px;
          text-decoration:none;
          background-color: lightgray;
          vertical-align: middle;
        }
        .container .item .change .num {
          width: 40px;
          height: 25px;
        }
        .container .item .del {
          position: absolute;
          top: 0;
          right: 0px;
          width: 40px;
          text-align: center;
          font-size: 40px;
          cursor: pointer;
          color: red;
        }[/mw_shl_code]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值