这是我参与8月更文挑战的第7天，活动详情查看：8月更文挑战
今天学习v-if和v-show, 一起学了。
它解决的问题
根据条件展示html标签。
用法
v-if 指令用于根据标志变量（flag）来决定标签出现与否，相应为true就显示出现。
v-show 指令用于根据标志变量（flag）来决定标签显示与否，标签一定会被渲染，但是通过display来控制标签显示。
稍微跟v-bind对比，该指令用于设置HTML属性：v-bind:href 缩写为 :href
<div v-show="flag" v-html="htmlMessage"></div>
代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<title>vue3青铜到黄金-丸子酱-vue-if-sho w</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/vue3.1.5_vue.global.js"></script>
</head>
<body>
<div id="wzApp">
<h3><a v-bind:href="url">点击访问->子酱@CSDN博客</a></h3>
<h3>条件渲染:通过"flag"的true/false来控制 v-text 的显隐 </h3>
<div v-if="flag" v-text="wanZiMessage"></div>
<div v-if="falseFlag" v-text="falseMessage"></div>
<h3>v-show: 不管条件成立与否，Dom结构里一定会出现这个div, 但是通过flag等来控制显示样式. 如果频繁切换显隐用v-show</h3>
<div v-show="flag" v-html="htmlMessage"></div>
<div v-show="falseFlag" v-text="falseMessage"></div>
</div>
</body>
<script>
const { createApp } = Vue
const url = 'https://blog.csdn.net/qq_28008615'
const flag = true
const falseFlag = false
const wanZiMessage = 'WanZi DEMO V-IF'
const falseMessage = '丸子酱 Show on Flag=False'
const htmlMessage = '<div style="background-color:red">Demo SHOW HTML</div>'
const app = {
setup() {
return {
url,
flag,
falseFlag,
wanZiMessage,
htmlMessage,
falseMessage
}
}
}
createApp(app).mount('#wzApp')
</script>
</html>
效果如下：
解析
控制标记flag & falseFlag：
const flag = true
const falseFlag = false
const wanZiMessage = 'WanZi DEMO V-IF'
const falseMessage = '丸子酱 Show on Flag=False'
上面展示了v-if的根据flag和falseFlag来渲染标签。我们看到第二个标签没有被渲染到Dom树结构中了。
上面也展示了v-show的根据flag和falseFlag来渲染标签。我们看到第二个标签不显示了，但是被渲染了只是display none。
我是丸子，每天学会一个小知识。
一个前端开发
希望多多支持鼓励，感谢
