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>
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