一、条件渲染

条件判断渲染相关的指令：

v-if
v-else
v-elif
v-show

1. `v-if`

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true 值的时候被渲染。

例如：

<h2 v-if="isShow">

  <div>abc</div>

  <div>abc</div>

  <div>abc</div>

  <div>abc</div>

  Hello world!

</h2>

当 isShow 为 true 时：

而为 false 时：

2. 与`v-else`配合使用

<div id="app">

  <h2 v-if="isShow">

    <div>abc</div>

    <div>abc</div>

    <div>abc</div>

    <div>abc</div>

    Hello world!

  </h2>

  <h2 v-else>

    如果isShow==false，显示我

  </h2>

</div>

当isShow为false时：

3. 与`v-else-if`配合使用

<div id="app">

  <!-- 但一般不这样使用，一般条件很多的时候在计算属性中解决 -->

  <h2 v-if="score>=90">优秀</h2>

  <h2 v-else-if="score>=80">良好</h2>

  <h2 v-else-if="score>=60">及格</h2>

  <h2 v-else>不及格</h2>

  分数：<input type="text" v-model="score">

</div>

<script>

  var app = new Vue({

    el: '#app',

    data: {

      score: 99

    }

  });

</script>

运行结果：

4. `v-show`的使用

用法和 v-if 基本一致：

<!-- v-if: 当条件为false时，包含v-if指令的元素根本不存在（一次）-->

<h2 v-if="isShow" id="aaa">{{message}}</h2>

<!-- 而v-show只是添加了行内样式而已（频繁变化时）-->

<h2 v-show="isShow" id="bbb">{{message}}</h2>

官网给出来的两者的区别：

5. 类型切换案例

<span v-if="isUser">

  <label for="username">用户账号</label>

  <input type="text" placeholder="用户账号" id="username" key="username">

</span>

<span v-else>

  <label for="email">用户邮箱</label>

  <input type="text" placeholder="用户邮箱" id="email" key="email">

</span>

<button @click="change_login_type">切换类型</button>

var app = new Vue({

  el: '#app',

  data: {

    isUser: true

  },

  methods: {

    change_login_type() {

      this.isUser = !this.isUser;

    }

  }

});

二、列表渲染

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

1. 遍历数组

准备数据：

var app = new Vue({

  el: '#app',

  data: {

    names: ['mike', 'jack', 'sara']

  },

  methods: {}

});

遍历渲染：

<!-- 没有使用下标值 -->

<ul>

  <li v-for="item in names">{{item}}</li>

</ul>

当需要使用下标值时使用：(item, index) in items形式的语法：

<!-- 获取索引值 -->

<ul>

  <li v-for="(item, index) in names">

    {{index+1}} -- {{item}}

  </li>

</ul>

运行结果：

此外也可以使用 item of items 的语法。

2. 遍历对象

语法：

遍历对象的所有值：v-for="value in myObject"

此外也可以通过：v-for="(value, name) in myObject" 来获取键信息

示例：

准备数据

var app = new Vue({

  el: '#app',

  data: {

    info: {

      name: "why",

      age: 18,

      height: 1.88

    }

  },

  methods: {}

});

获取`value`

<ul>

  <!-- 1.value -->

  <li v-for="item in info">

    {{item}}

  </li>

</ul>

同时获取`key`

<!-- 2.获取key-value -->

<ul>

  <li v-for="(key, value) in info">

    {{key}} -- {{value}}

  </li>

</ul>

同时获取`index`

<ul>

  <li v-for="(key, value, index) in info">

    {{index+1}}--{{key}}--{{value}}

  </li>

</ul>

运行结果：

3. 循环渲染中key的使用

以下解释摘自官网：https://v3.cn.vuejs.org/api/special-attributes.html#key

key 特殊 attribute 主要用做 Vue 的虚拟 DOM 算法的提示，以在比对新旧节点组时辨识 VNodes。如果不使用 key，Vue 会使用一种算法来最小化元素的移动并且尽可能尝试就地修改/复用相同类型元素。而使用 key 时，它会基于 key 的顺序变化重新排列元素，并且 key 不再存在的元素将始终被移除/销毁。

有相同父元素的子元素必须有唯一的 key。重复的 key 会造成渲染错误。

简单来说使用key可以提高程序的效率，但需要保证相同父元素的子元素必须有唯一的 key。

但是对于一般的数组来说是不能使用index作为 v-for 指令的 key 的，详细解析见：Vue2.0 v-for 中 :key 到底有什么用？ - 方应杭的回答 - 知乎 https://www.zhihu.com/question/61064119/answer/766607894

那如果不使用 index ，那使用什么东西作为 key 呢？这里知乎大神给出了答案：

没有 id 怎么办？

创建一个 id() 函数，每次调用自增一

使用 guid 库或者 uuid() 库

最好使用数据库中的 id

具体示例如下：

var app = new Vue({

  el: '#app',

  data: {

    letters: ['a', 'b', 'c', 'd', 'e'],

    curId: 0

  },

  methods: {

    getId() {

      res = this.curId;

      this.curId++;

      return res;

    }

  }

});

<div id="app">

  <ul>

    <li v-for="item in letters" :key="getId()">{{item}} </li>

  </ul>

</div>

运行结果：

4. 哪些数组方法是响应式的

是响应式的方法：

push(Object obj)
pop()
shift() 删除第一个
unshift() 在数组前面添加元素，可以多个
splice() 移除指定下标范围的元素
sort() 排序元素
reverse() 反转元素
使用Vue.set(this.xxx, 0, "aaa")来代替 this.xxx[0]="aaa"; 修改元素的值。

5. CoderWhy老师留下作业的完成

要求：展示出列表 ['海王', '海尔兄弟', '火影忍者', '进击的巨人'] 中的数据，当鼠标点击某个文本时，该文本变成红色，而其他文本为原来的黑色。（即选中高亮）

css部分：

.active {

  color: red;

}

js部分：

var app = new Vue({

  el: '#app',

  data: {

    movies: ['海王', '海尔兄弟', '火影忍者', '进击的巨人'],

    currentIndex: -1

  },

  methods: {

    onClick(li_index) {

      this.currentIndex = li_index;

    }

  }

});

html部分：

<ul>

  <!-- <li v-for="movie in movies">{{movie}}</li> -->

  <li v-for="(movie, index) in movies" :class="{active:index===currentIndex}" @click="onClick(index)">

    {{movie}}

  </li>

</ul>

实现效果：

点击第一个：

点击第三个：

巴特西

Vue学习笔记（三）条件渲染和循环渲染

一、条件渲染

1. `v-if`

2. 与`v-else`配合使用

3. 与`v-else-if`配合使用

4. `v-show`的使用

5. 类型切换案例

二、列表渲染

1. 遍历数组

2. 遍历对象

获取`value`

同时获取`key`

同时获取`index`

3. 循环渲染中key的使用

4. 哪些数组方法是响应式的

5. CoderWhy老师留下作业的完成

最新文章

热门文章

巴特西

Vue学习笔记（三）条件渲染和循环渲染

一、条件渲染

1. v-if

2. 与v-else配合使用

3. 与v-else-if配合使用

4. v-show的使用

5. 类型切换案例

二、列表渲染

1. 遍历数组

2. 遍历对象

获取value

同时获取key

同时获取index

3. 循环渲染中key的使用

4. 哪些数组方法是响应式的

5. CoderWhy老师留下作业的完成

最新文章

热门文章

1. `v-if`

2. 与`v-else`配合使用

3. 与`v-else-if`配合使用

4. `v-show`的使用

获取`value`

同时获取`key`

同时获取`index`