vue3前端青铜到黄金王者 - 第四个入门v-if和v-show指令监听事件

最新推荐文章于 2023-07-13 11:19:36 发布

丸子丸子丸子酱

最新推荐文章于 2023-07-13 11:19:36 发布

阅读量407

点赞数

分类专栏： vue3前端青铜到黄金王者文章标签： vue js javascript

本文链接：https://blog.csdn.net/qq_28008615/article/details/119493573

版权

vue3前端青铜到黄金王者专栏收录该内容

16 篇文章 7 订阅

订阅专栏

今天学习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>