新建项目

npm create vite@latest

运行项目

cd 项目目录
npm install
npm run dev

条件渲染指令

1、v-if

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

2、v-else

可以使用 v-else 为 v-if 添加一个“else 区块”。

3、v-else-if

v-else-if 提供的是相应于 v-if 的“else if 区块”。它可以连续多次重复使用。

4、v-show

可以用来按条件显示一个元素的指令是 v-show。

5、v-for

案例介绍

1、案例显示当前库存状态

v-if、v-else、v-else-if他们是把多余的dom节点去除(不是none)，下面这个案例使用这三个指令完成。

（1）APP.vue代码

<template>
  <div id="app">
    <input type="text" v-model="stock"/>
    <p v-if='stock > 10'>库存为{{ stock }}</p>
    <p v-else-if='0 < stock && stock <= 5'>商品即将售馨</p>
    <p v-else>暂时没有库存</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const stock = ref(0)
</script>

（1）运行效果

2、案例根据条件显示不同的template标签

既想使用一个标签包裹需要需要的标签，又不想显示包裹标签，可以使用template标签
v-if == true显示
v-if == false隐藏

（1）案例要求：点击按钮，改变显示的template标签。
（2）参考代码：

<template>
  <div id="app">
    <template v-if="flag">
      <h1 style="color:red">你真美</h1>
    </template>
    <template v-else>
      <input type="text" value="你真帅" style=" font-size:36px;color:blue; font-weight: 900;text-align: center;" />
      <br><br>
    </template>
    <button @click="changeFlag">修改</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const flag = ref(true)

function changeFlag () {
  flag.value = !flag.value
}
</script>

3、案例显示和隐藏dom节点

v-show == true 把dom节点显示
v-show == false 把dom节点隐藏(display:none)

（1）案例要求：点击按钮，显示或隐藏h1标签。
（2）运行效果

（3）参考代码

<template>
  <div id="app">
    <p v-show="isShow">我会隐身</p>
    <button @click="isShow = !isShow">点击显示隐藏</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
const isShow = ref(true)

</script>

4、案例使用v-for显示专业列表
（1）效果展示

（2）参考代码

<template>
  <div id="app">
    <ul>
      <li v-for="item in majors" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const majors = ['计算机科学与技术', '数字媒体技术', '物联网工程', '软件工程', '网络工程', '人工智能']

</script>

<style>
ul {
  list-style: none;
}

li {
  list-style-type: square;
  list-style-position: outside;
  text-align: left;
  font-size: large;
  padding: 5px;
}
</style>

5、案例使用v-for显示专业列表