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 的新语法

 
 
 
 
 
s