小问题

1. 使用 v-if 时, 2个input 文本框只要其中一个输入文本另一个也会显示

　　原因: 这是因为Vue在进行DOM渲染时, 出于性能考虑, 会尽可能的复用已经存在的元素, 而不是重新创建新的元素

　　在案例中, Vue内部会发现原有的input元素不在使用, 直接作为else中的input来使用

　　解决: 如果我们不希望Vue出现类似的重复利用问题, 可以给对应的input添加key 并且我们需要保证key的不同

　　因为: 会把key作为一个标识, 在别的地方能不能复用, 如果俩个key是相同的就会进行复用　　

 <div v-if="flag">账号登录<input type="text" placeholder="账号登录" :key="userName"> </div>
 <div v-else>邮箱登录:<input type="email" placeholder="邮箱登录" :key="email/"> </div>

2. 注意通过索引值修改数组的元素不是响应式的页面是不会跟着变化的

　　虽然数据打印出来是变化的但是页面是不会跟着变化的

　　如果有必要根据索引改变值的话最好使用 splice 进行修改替换

　　也可以使用Vue提供的 Vue.set()

　　Vue.set(要修改的对象, 索引, 修改后的值)

3. v-for 根据index改变当前的样式

<style>
    .active {
      color: red;
    }
    li {
      cursor: pointer;
    }
  </style>
</head>

<body>
  <div id="app">
    <ul>
      <li v-for="(item, index) in attr" :class="{active: currentIndex == index}" @click="list(index)">{{item}}</li>
    </ul>
  </div>

  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        attr: ['a','b', 'c', 'f', 'g'],
        currentIndex: 0
      },
      methods: {
        list(index) {
          this.aaa = index
        }
      }
    });
  </script>

View Code

for (let i = 0;i < this.books.length;i++) {
         price += this.books[i].price * this.books[i].num
    }
for(let i in this.books) {
         price += this.books[i].price * this.books[i].num
     }
for (const iterator of this.books) {
        price += iterator.price * iterator.num
     }

上述代码效果是一样的只不过第一种是ES5 中的语法 ,第二和第三个是ES6 的新语法