一、z-index

覆盖问题 通过设置z-index

二、在循环中双向绑定

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

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

三、购物车求和

htmlvue 在computed里写 vue在methods里写

  1. methods: {
  2. sum(){
  3. var total = 0;
  4. this.list.forEach(item=>{
  5. total = item.productCount*item.productPrice+total;
  6. })
  7. return total
  8. }
  9. }

使用

  1. <van-submit-bar
  2. :price="sum()*100"
  3. button-text="提交订单">
  4. <van-checkbox v-model="checkAll" @change="change">全选</van-checkbox>
  5. </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文件

  1. module.exports={
  2. lintOnSave:false
  3. }

解决方案二:
五、爬坑之旅 - 图1
使用window。 就可以了

3-1、图片403

1.异常信息

五、爬坑之旅 - 图2

2.解决方案

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

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

image.png

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的内容

  1. <h2 v-if="true">v-if</h2>
  2. <h2 v-else>v-else</h2>