Vue_条件渲染

最新推荐文章于 2023-02-18 22:18:33 发布
最新推荐文章于 2023-02-18 22:18:33 发布
阅读量111 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cwh0908/article/details/86359341
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Vue框架学习_条件渲染</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/bootstrap.js"></script>
		<link rel="stylesheet" href="../css/bootstrap.css" />		
	</head>
	<body>
		
		<div id="div1">
			<p v-if="isCreated">条件渲染_v-if</p>
			
			<template v-if="isCreated">
				<p>创建</p>
				<p>创建</p>
				<p>创建</p>
				<p>创建</p>
			</template>
			
				<template v-if="isCreated">
					<p>子创建</p>
					<p>子创建</p>
				</template>
				
				<template v-else>
					<p>子删除</p>
					<p>子删除</p>
				</template>
			
			<template v-else>
				<p>删除</p>
				<p>删除</p>
				<p>删除</p>
				<p>删除</p>
			</template>
			
			<!--v-show没有template用法-->
			<p v-show="isShow">显示/隐藏</p>
			<p v-show="isShow">显示/隐藏</p>
			<p v-show="isShow">显示/隐藏</p>
			<p v-show="isShow">显示/隐藏</p>
			
			<button v-on:click="click">按钮_更改条件</button>			
			
		</div>

		
		<script>
			var vm=new Vue({				
				el:"#div1",//绑定id对象				
				data:{//定义属性对象
					isCreated:true,
					isShow:true
				},					
				methods:{//定义函数，可传参					
					click:function(){
						this.isCreated=!this.isCreated;
						this.isShow=!this.isShow;
					}
				},				
			});
			
		</script>
		
	</body>
</html>

 

友人C君~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的条件渲染
weixin_52339077的博客
09-28 876
vue的条件渲染
简单理解Vue条件渲染
09-01
主要帮助大家简单理解Vue条件渲染，什么是Vue条件渲染,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue条件渲染
weixin_34362991的博客
03-02 119
v-if 在字符串模板中，如 Handlebars ，我们得像这样写一个条件块： &lt;!-- Handlebars 模板 --&gt; {{#if ok}} &lt;h1&gt;Yes&lt;/h1&gt; {{/if}} 在 Vue.js ，我们使用 v-if 指令实现同样的功能： &lt;h1 v-if="ok"&gt;Yes&lt;/h1&gt; 也可以用 v-e...
Vue的条件渲染和对象渲染
weixin_43250623的博客
05-23 2630
三、条件渲染 通过条件指令可以控制元素的创建(显示)或者销毁(隐藏) v-if 条件判断使用 v-if 指令 v-else v-else 指令给 v-if 添加一个 “else” 块 v-else-if 用作 v-if 的 else-if 块 v-show 使用v-show 指令显示和隐藏元素，与v-if最大区别在于v-show不删除元素 <div i...
Vue系列五：条件渲染
苍穹尘的博客
05-18 299
条件渲染指令 v-if v-else v-show 比较v-if与v-show 如果需要频繁切换 v-show 较好 <body> <div id="demo"> <p v-if="ok">表白成功</p> <p v-else>表白失败</p> <hr> <p v-show="ok"&gt...
Vue之条件渲染
知识应该共享，创造才应收费
02-18 991
条件渲染就是在指定的条件下，渲染出指定的UI。比如当我们显示主页的时候，应该隐藏掉登录等一系列不相干的UI元素。即UI元素只在特定条件下进行显示。而在VUE3中，这种UI元素的显示和隐藏可以通过两个关键字，`v-if` 和`v-show`来实现。但是虽然实现的功能一样，但他们两者有着一些细微的区别。总结起来这个区别就是：v-show控制UI元素隐藏时只是将UI的显示状态变成了不可见，实际上这个UI是存在的，但是v-if隐藏UI元素时则是直接干掉了这个UI元素，使其不显示
前端之vue的条件渲染
weixin_46372074的博客
04-15 1041
vue的条件渲染
vue条件渲染指令
m0_65063660的博客
08-27 1047
如图，v-if的元素被移除，v-show则使用display隐藏。添加或移除 style="display: none;v-if 指令一起使用，否则它将不会被识别！v-if 指令一起使用，否则它将不会被识别！按需控制 DOM 的显示与隐藏。注意：v-else-if 指令。动态地创建或移除DOM 元素。注意：v-else 指令。......
Vue-条件渲染和循环渲染
qq_56973906的博客
08-31 1044
v-if是通过动态的创建或移除元素来实现元素的显示和隐藏。这样引起的问题是：arr 数组新增一项数据时，会对每一项再做一遍v-if 循环，然后for 循环渲染。渲染过程为：对arr每一项先做map循环判断v-if给出的条件，再做一遍for 循环渲染。1.v-for循环普通数组:v-for=“(em,index) in arr1”2.v-for循环对象数组:v-for=“(em,index) in arr2”3.v-for迭代对象:v-for=“(em, index) in arr3”...
Vue--条件渲染
qq_45954420的博客
03-06 1303
1.v-if （1）.v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。 写法：v-if="表达式" v-else-if="表达式" v-else="表达式" 适用于：切换频率较低的场景 特点：不展示DOM元素直接被移除 注意：v-if可以和 v-else-if、v-else一起使用 但要求结果不能被打断 <h1 v-if="awesome">Vue is awesome!</h1> 也可以用 v-else 添加
vue条件渲染和列表渲染
过客如期的博客
05-20 1078
一，条件渲染：v-if和v-show 1.v-if : vue提供了v-if指令，可以根据条件判断元素渲染与否。 2.v-if接受一个具有truth值的表达式，当为true时元素渲染，反之元素不渲染。 3.相应的还有v-else和v-else-if，当v-if为false时，渲染v-else内容。 4.注意，v-else必须和和v-if相邻，否则识别不了。 5.v-show : vue提供了另一个指令v-show也可以用来动态渲染元素。 6.v-if会销毁元素，代驾比较大，v-show只是在css的disp
学习vue.js条件渲染
10-20
主要和大家一起学习vue.js条件渲染，代码注释详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
深入理解Vue 的条件渲染和列表渲染
08-29
本篇文章主要介绍了深入理解Vue 的条件渲染和列表渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
浅析Vue.js 中的条件渲染指令
10-17
主要介绍了Vue.js 中的条件渲染指令，Vue.js 中的条件渲染指令可以根据表达式的值，来决定在 DOM 中是渲染还是销毁元素或组件。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考...
vue为一个元素绑定多个点击事件
热门推荐
友人C君的博客
01-29 1万+
&lt;button id="button2" v-on:click="clickButton1();clickButton2()" v-on:click=""&gt;按钮2&lt;/button&gt; &lt;script&gt; var vm=new Vue({ el:"#button2", methods:{ clickButton
npm安装淘宝的cnpm并安装使用vue-cli
友人C君的博客
06-03 6606
Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 安装流程 首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 使...
Vue_输入框过滤数据
友人C君的博客
01-12 1915
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Vue框架学习_输入框过滤后台数据&lt;/title&gt; &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.j
Vue 路由守卫（路由钩子函数）
友人C君的博客
09-20 1808
1、全局路由钩子函数 beforeEach beforeResolve afterEach，注意，使用vue-cli搭建的index路由文件里直接将router路由对象暴露出去，应当使用变量接收此路由对象，然后使用该变量来调用全局的路由钩子函数，最后把该变量暴露出去 2、单个路由独享的守卫 beforeEnter 3、组件内的路由守卫beforeRo...
Vue路由命名视图及路由组件切换
友人C君的博客
06-21 1581
本来一个页面里面只能有一个路由视图 对应 一个组件，现在可以多个路由视图（router-view） 对应 多个组件。 载入子页面 在routes中使用components属性，将组件名称及其组件对象包裹，由此可在页面中的router-view标签中添加name属性来对应路由组件，未定义name属性则默认填入default组件 在routes中使用children属性，并传入路由组件对象...
vue使用条件渲染怎么实现
最新发布
05-24
Vue 中的条件渲染可以使用 `v-if` 指令来实现。例如，当 `show` 为 `true` 时，显示一个 `div` 元素： ```html <div v-if="show">This is shown when 'show' is true.</div> ``` 当 `show` 为 `false` 时，`div` 元素将不会被渲染。你也可以使用 `v-else` 指令来添加一个“否则”块，它将在 `v-if` 表达式为 false 时渲染： ```html <div v-if="show"> This is shown when 'show' is true. </div> <div v-else> This is shown when 'show' is false. </div> ``` 还可以使用 `v-else-if` 指令添加多个“否则如果”块。例如： ```html <div v-if="condition1"> This is shown when 'condition1' is true. </div> <div v-else-if="condition2"> This is shown when 'condition2' is true and 'condition1' is false. </div> <div v-else> This is shown when both 'condition1' and 'condition2' are false. </div> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值