|
一、新建项目
1、使用Vite创建Vue Typescript 项目（conditional-rendering ）
npm create vite@latest
2、文件结构
3、运行
cd conditional-rendering
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）运行效果
  
（2）HelloWorld.vue参考源码
库存为{{ stock }}
商品即将售馨
暂时没有库存
import { ref } from "vue";
const stock = ref(0)
2、案例 根据条件显示不同的template标签
既想使用一个标签包裹需要需要的标签，又不想显示包裹标签，可以使用template标签 v-if == true显示 v-if == false隐藏
（1）案例要求：点击按钮，改变显示的template标签。
（2）运行效果
（3）参考代码
你真美
修改
import { ref } from "vue";
const flag = ref(true)
function changeFlag() {
flag.value = !flag.value
}
3、案例 显示和隐藏dom节点
v-show == true 把dom节点显示 v-show == false 把dom节点隐藏(display:none)
（1）案例要求：点击按钮，显示或隐藏h1标签。
（2）运行效果
 
（3）参考代码
我会隐身
点击显示隐藏
import { ref, watch } from "vue"
const isShow = ref(true)
4、案例 使用v-for显示专业列表
（1）运行效果
（2）参考代码
{{ item }}
const majors = ['计算机科学与技术', '数字媒体技术', '物联网工程', '软件工程', '网络工程', '人工智能']
ul {
list-style: none;
}
li {
list-style-type: square;
list-style-position: outside;
text-align: left;
font-size: large;
padding: 5px;
}
5、案例 使用v-for循环数字和字符
（1）运行效果
（2）参考代码
{{ num }}
{{ str }}
6、案例 使用v-for显示专业列表
（1）运行效果
（2）参考代码
import { ref } from 'vue'
// const value = ref('')
const value = ref('1')
const majors = [
{
value: '1',
label: '计算机科学与技术',
},
{
value: '2',
label: '数字媒体技术',
},
{
value: '3',
label: '物联网工程',
},
{
value: '4',
label: '人工智能',
},
{
value: '5',
label: '软件工程',
},
]
7、案例 使用v-for完成todos案例
 
import { ref, reactive } from 'vue'
const id = ref(0)
const newTodo = ref('')
// reactive作用：定义一个对象类型的响应式数据(基本数据类型用ref函数)
const todos = reactive([
{ id: id.value++, text: '番茄炒蛋' },
{ id: id.value++, text: '醋溜土豆丝' },
{ id: id.value++, text: '香菇炒肉' }
])
function addTodo() {
todos.push({ id: id.value++, text: newTodo.value })
newTodo.value = ''
}
function removeTodo(index: number) {
todos.splice(index, 1);
}
Add Todo
{{ todo.text }}
删除
8、案例 使用v-for表格中显示对象数组
（1）运行效果
（2）参考代码
班级
姓名
性别
年龄
{{ item.grade }}
{{ item.name }}
{{ item.gender }}
{{ item.age }}
删除
添加
import { ref } from "vue";
let counter = 3
interface Student {
grade: number
name: string
gender: string
age: number
}
let students = ref([{
grade: 1,
name: '张三',
gender: '男',
age: 20
}, {
grade: 2,
name: '李四',
gender: '女',
age: 21
}]);
function add() {
var student = {
grade: counter++,
name: '新人',
gender: '女',
age: 18
}
students.value.push(student);
}
function del(index: number) {
students.value.splice(index, 1);
}
|