当标签上的v-if值为false是标签上的v-for是否执行

来源：4-1 使用组件的细节点

韶华_易逝

2019-11-26

当吧list中id的数据改成数字时会报错但是我已经做了判断
所以我想知道当标签上的v-if值为false是标签上的v-for是否执行
图片描述

<!DOCTYPE html>
<html lang="zn">
<head>
  <meta charset="UTF-8">
  <title>使用组件的细节</title>
  <script src=./vue.js></script>
</head>
<body>
  <div id="root">
    <table>
      <tr v-for='item in list'
          :con = 'item'
          is='row'
          ref='trs'
          @change='handleCount'></tr>
    </table>
    <!-- <div ref='hello'>你好</div> -->
    <ul>
      <lis></lis>
    </ul>
    <select name="" id="">
      <option value="" is="options"></option>
      <!-- <options></options> -->
    </select>
    <button @click='handleBtnClick'>获取ref</button>
    <div>{{total}}</div>
  </div>
  <script>
    /*方法一：
    子组件中的data 使用方法返回对象的形式是为了避免子组件之间数据相互影响*/
    var row = {
      props: ['con'],
      template: `<tr><td v-for="(item,name) in content">
        <img v-if="item.substr(0, 4) == 'http'&&typeof(item) != 'number'"  v-for="isrc in item.split(';')" :src="isrc" alt="">
        <span v-else-if='name=="id"' @click='idClick'>{{item}}</span>
        <span class="aa" v-else>{{item}}</span>
        </td></tr>`,
      data: function () {
        return {
          content: this.con
        }
      },
      methods: {
        idClick: function () {
          this.content.id = Number(this.content.id)+1+"";
          this.$emit('change');
        }
      }
    }
    var lis = {
      template: '<li>你好</li>'
    }
    var options = {
      template: '<option value="哈哈">哈哈</option>'
    }
    var vm = new Vue({
      el: '#root',
      data: {
        list: [{
          id: '1',
          text: '231'
        },{
          id: '2',
          text: '21'
        },{
          id: '3',
          text: '31'
        },{
          id: '4',
          text: 'https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg;https://www.gstatic.com/images/branding/googlelogo/svg/googlelogo_clr_74x24px.svg'
        }],
        total: 0
      },
      
      components: {
        row: row,
        lis: lis,
        options: options
      },
      methods: {
        handleBtnClick: function () {
          console.log(this.$refs.trs);
          console.log(this.$refs.trs[0].content);
          console.log(this.$refs.trs[0].content.id);
          console.log(this.$refs.trs[0].content.text);
          console.log(this.$refs.hello);
        },
        handleCount: function () {
           this.total = 0;
           for (var i = 0; i < this.$refs.trs.length; i++) {
             console.log(Number(this.$refs.trs[i].content.id))
             this.total+=Number(this.$refs.trs[i].content.id)
           }
           console.log(this.total)
        }
      }
    })
  </script>
</body>
</html>

写回答

1回答