使用v-if案例

需求：点击三次触发事件；弹出及Dom元素

         <!DOCTYPE html>
        <html>
            <head>
                <meta charset="utf-8">
                <title></title>
                <script src="js/vue.min.js"></script>
            </head>
            <body>
                <div id="app">
                    <!-- 判断条件 v-if ="boo == 23"-->
                    <p v-if ="boo == 23">Dom元素</p>
					<!--触发事件 "add"方法 -->
                    <button @click ="add">触发事件</button>
                </div>
                <script>
                    new Vue({
                        <!--挂载点  -->
                        el:'#app',
                        <!--初始数据  -->
                        data:{
                            boo:20
                        },
                        methods:{
                            add(){
                                <!--调用触发事件的方法，使判断条件++  -->
                                this.boo++;
                            }
                        },
                    })
                </script>
 
            </body>
        </html>

posted @ 2022-05-19 10:30 爱豆技术部阅读(63) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 使用v-for遍历案例

· 使用v-bind动态加载内容

· vue中v-if的常见使用

· v-if 实现折叠功能

· 常规的 v- if + v-else 取反的 DOM 展示

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称：爱豆技术部
园龄： 3年5个月
粉丝： 2
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

随笔档案 (213)

阅读排行榜

评论排行榜

1. IDEA激活密钥(永久)(1)

爱豆技术部

小幸运🤞

使用v-if案例

使用v-if案例

公告

常用链接

最新随笔

我的标签

积分与排名

随笔档案 (213)

阅读排行榜

评论排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/vue.min.js"></script>
	</head>
	<body>
	<div id="app">
	<!-- 判断条件 v-if ="boo == 23"-->
	<p v-if ="boo == 23">Dom元素</p>
	<!--触发事件 "add"方法 -->
	<button @click ="add">触发事件</button>
	</div>
	<script>
	new Vue({
	<!--挂载点 -->
	el:'#app',
	<!--初始数据 -->
	data:{
	boo:20
	},
	methods:{
	add(){
	<!--调用触发事件的方法，使判断条件++ -->
	this.boo++;
	}
	},
	})
	</script>

	</body>
	</html>