制作一个网站需要什么,wordpress站酷主题,成都建设工程安监局网站,连接国外网站的appv-if 指令#xff1a;用于控制元素的显示或隐藏。
执行条件#xff1a;当条件为 false 时#xff0c;会将元素从 DOM 中删除。
应用场景#xff1a;适用于显示隐藏切换频率较低的场景。 语法格式#xff1a;
div v-if数据内容/div
基础用…v-if 指令用于控制元素的显示或隐藏。
执行条件当条件为 false 时会将元素从 DOM 中删除。
应用场景适用于显示隐藏切换频率较低的场景。 语法格式
div v-if数据内容/div
基础用法
templateh3条件渲染 v-if/h3p v-ifstatus内容/pbutton clickstatus !status显示/隐藏/button
/templatescript setup
import { ref } from vue;
let status ref(true);
/script效果 注当条件为 false 时会将该元素从 DOM 中删除。 配合 JS 表达式使用
templateh3条件渲染 v-if/h3p v-ifnum 5内容/pbutton clicknum增加{{ num }}/button
/templatescript setup
import { ref } from vue;
let num ref(0);
/script效果 配合 v-else 和 v-else-if 使用 templateh3条件渲染 v-else 和 v-else-if/h3p当前 num 的值是{{ num }}/pbutton clicknum点击num1/buttonp v-ifnum 1张三/pp v-else-ifnum 2李四/pp v-else-ifnum 3王五/pp v-else你谁呀/p
/templatescript setup
import { ref } from vue;
let num ref(0);
/script效果 注v-else 和 v-else-if 必须紧跟在 v-if 的后边标签之间紧挨着不能被打断。另外 v-else 不需要写执行条件。 原创作者吴小糖
创作时间2023.12.19
