循环判断

目录

• 条件判断
  • v-if、v-else-if、v-else
  • v-if与v-show
  • v-for遍历数组
• 数组中哪些函数是响应式的
• 高阶函数

条件判断

v-if、v-else-if、v-else

• 这三个指令可以根据表达式的值在DOM中渲染或销毁元素或组件

<div id="app">
	<h2 v-if="message < 60">不及格</h2>
	<h2 v-else-if="message >= 60 && message < 80">良好</h2>
	<h2 v-else>优秀</h2>
</div>

v-if与v-show

• 开发中如何选择？
  • 当需要在显示与隐藏之间频繁切换时，选择v-show
  • 当只有一次决定是否显示时，选择v-if

v-for遍历数组

• 官方推荐在使用v-for时，给对应的元素或组件添加一个:key属性。了解：diff算法

数组中哪些函数是响应式的

vue实现页面刷新就是因为数据是响应式的，执行某些方法后，vue会监听数据的变化，创建虚拟DOM，再将虚拟DOM渲染到真实DOM。

vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

• push()

• pop()

• shift() ：删除数组中的第一个元素

• unshift()：在数组最前面添加元素

• splice() ：删除元素/插入元素/替换元素

• sort()

• reverse()

例：修改数组中第一个元素的值，实现方式：

<script>
	const app = new Vue({
        el : '#app',
        methods : {
            btnClick () {
                // 1. 通过索引修改元素的值 不可以响应
                // this.letters[0] = 'bbb'
                // 2. splice方法有被监听，可以实现响应式
                // this.letters.splice(0,1,'bbb');
                // 3. 使用vue自带的set方法，可以实现响应式
                Vue.set(this.letters, 0, 'bbb')
            }
        }
    })
</script>

高阶函数

模拟：给一个数组，第一次遍历所有小于100的值，并返回，第二次将新数组中所有成员*2，第三次将所有值都相加

const nums = [10, 20,111, 222, 444, 40, 50]
let newNums = nums.filter(function (n){
  return n < 100
}).map(function (n) {
  return n * 2
  /* preValue: 初始值，reduce()的第二个参数 */
}).reduce(function (preValue, n) {
  return  preValue + n
}, 0)
console.log(newNums);

箭头函数

const nums = [10, 20, 111, 222, 444, 40, 50]
 
console.log(nums.filter(n => n < 100).map(n => n * 2).reduce((preValue, n) => preValue + n, 0));