五、爬坑之旅

一、z-index

覆盖问题 通过设置z-index

二、在循环中双向绑定

问题：做购物车时，数量*单价=小计 在循环中 双向绑定要指定对象
v-model=”item.num” 如果不加item 你在任何一个对象中增加数量 计算小计时 每个对象都会增加 计算小计

<div class="list" v-for="item of list" :key="item.id">
    <van-stepper input-width="20px" button-size="15px" 
    @change="number" v-model="item.productCount" />
    <p class="count">小计：{{item.productPrice*item.productCount}}元</p>
</div>

三、购物车求和

htmlvue 在computed里写 vue在methods里写

methods: {
    sum(){
      var total = 0;
      this.list.forEach(item=>{
        total = item.productCount*item.productPrice+total;
      })
      return total
    }
  }

使用

<van-submit-bar
  :price="sum()*100"
  button-text="提交订单">
  <van-checkbox v-model="checkAll" @change="change">全选</van-checkbox>
</van-submit-bar>

Tip:sum函数在调用时要乘以一百 vant-ui组件的price属性是以分为单位

四、关于报错

1-1.sockjs.js?9be2:1606 GET http://192.168.11.22:8080/sockjs-node/info?t=1573822778743 net::ERR_CONNECTION_TIMED_OUT

未解决

2-1.consloe.log报错

解决方法：（有多种解决方法，要试）
新建vue.config.js文件

module.exports={
    lintOnSave:false
}

解决方案二：

使用window。 就可以了

3-1、图片403

1.异常信息

2.解决方案

<meta name="referrer" content="no-referrer" /><!--页面头部添加-->

4-1数据结构问题 父组件子组件传参渲染不出来

1、数据本身只有一条数据，是一个集合，那么我们在请求数据时，就不能this.detail=res.data;而是要this.detail.push(res.data) 这样传参时再去进行正常v-for渲染

五、v-if和v-else

v-else必须要和v-if配套使用
Tips:v-if为真时，显示v-if的内容，否则显示v-else的内容

<h2 v-if="true">v-if</h2>
<h2 v-else>v-else</h2>