Vue - 渲染 - 条件渲染与列表渲染

条件渲染

这个就是 if else , 在 vue 里, 语法是 v-if v-else

v-if v-else

<script setup>
	const awesome = ref(true)
</script>
<template>
  <button @click="awesome = !awesome">Toggle</button>

  <h1 v-if="awesome">Vue is awesome!</h1>
  <h1 v-else>Oh no 😢</h1>
</template>

通过 click 改变 布尔值, 再通过条件语句, 来实现 toggle 效果

v-else-if

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

使用 <template> 来打包一组元素的渲染切换

<script setup>
const ok = ref(true)
const ok2 = ref(true)
</script>

<template>
   <template v-if="ok">
      <h1>Title</h1>
      <p>Paragraph 1</p>
      <p>Paragraph 2</p>
    </template>
    <template v-else-if="ok2">
      <h1>Title</h1>
      <p>Paragraph 3</p>
      <p>Paragraph 4 </p>
    </template>
    <template v-else>
      <h1>Title</h1>
      <p>Paragraph 5</p>
      <p>Paragraph 6</p>
    </template>
</template>

v-show 与 v-if 类似的东西

这个先不学了, 粗略看了一下, 能跟 v-if 实现基本一样的效果, 只是在性能和渲染结果上有细微差异, 唉, 先不管了, 咱们目前估计也用不到, 不学不学, 真烦
传送门

列表渲染

这应该就是循环语句了

v-for 基本渲染

<script setup>
    const cities = ref([{name: "Beijing"}, {name: "Chengdu"}])
</script>

<template>
    <li v-for="city in cities">
        {{ city.name }}
    </li>
</template>

显示数组下标

<template>
    <li v-for="(city, index) in cities">
        cityIndex: {{index}} , cityName: {{ city.name }}
    </li>
</template>

> `in` 也可以用 `of` 来替代, 挺无语的,  搞这么多干啥, 乱七八糟的, 统一规则不好么

遍历字典

const myObject = reactive({
  title: 'How to do lists in Vue',
  author: 'Jane Doe',
  publishedAt: '2016-04-10'
})

* 遍历获取 `value`,  相当于 `python` 中的 `.values()`
  ```
  <ul>
    <li v-for="value in myDictObject">
      {{ value }}
    </li>
  </ul>
  ```
* 同时获取 `key`, `value`
  ```
  <ul>
    <li v-for="(value, key) in myDictObject">
     {{key}} = {{ value }}
    </li>
  </ul>
  ```
 * 下标也同时获取到
    ```
    <ul>
      <li v-for="(value, key, index) in myDictObject">
        {{key}} = {{ value }}, index is : {{ index }}}
      </li>
    </ul>
    ```

v-for 可直接接受一个 整数值

<span v-for="n in 10">{{ n }}</span>

有点特别的是, n 是从 1 开始的, 不是 0, ps: 真无语, 又搞这样没用的东西

<template> 打包多个元素

与 v-if 一样, 也是可以在 块 里打包多个元素

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

v-if, v-for 嵌套

<template v-for="todo in todos">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

• 不推荐v-if, v-for 同时使用

优先级不一样, ps: 真的不是设计烂?
风格指南

key 管理状态

没搞懂这个有什么用, 先放放好了文档链接

数组修改

修改数组数据, vue 自动侦测并修改, 修改的类型分为两种, 一种是不更换数组对数据内部数据进行修改, 还有一种是创建一个新数组, 替换原数组

修改数组

在原有数组上进行修改, 不创建新数组

• push(): 在数组的末尾追加元素, 并返回新长度
• pop(): 删除最后 1 个元素, 返回该值
• shift(): 删除前面第 1 个元素, 返回该值
• unshift(): 在数组的开头添加元素, 返回新长度
• splice(index,howmany,item1, …, itemX): 插入/删除项目
  • index：元素插入/删除 索引位置
  • howmany：要删除的项目数量, 默认不设置, 表示其后的全部元素
  • *items：可选, 向数组添加的新元素。

  例:

  • splice(1): 保留前一个元素之后的全部删除
  • splice(2): 保留前两个元素之后的全部删除splice()既可以删除, 也可以添加

• sort 排序
• reverse 反转

替换成新数组

有些变更不支持在原数组上进行更改, 只能生成一个 新数组

• filter(): 通过一定条件过滤出一个新数组

  example1.items = example1.items.filter(function (item) {
    return item.message.match(/Foo/)
  })
  123
  

• concat(): 连接两个或多个数组
• slice(start, end): 切片