VUE3.X常用指令

最新推荐文章于 2024-01-29 15:22:22 发布

月疯

最新推荐文章于 2024-01-29 15:22:22 发布

阅读量145

点赞数

分类专栏：【VUE.js】

本文链接：https://blog.csdn.net/chehec2010/article/details/119712239

版权

【VUE.js】专栏收录该内容

33 篇文章 3 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p>
			<!-- v-text指令 -->
			<p v-text="msg"></p>
			<!-- v-html -->
			<p v-html="info"></p>
		</div>
		Vue.createApp({
			data(){
				return{
					msg:"hello"
					info:'<h3>welcome</h3>'
				}
			}
		}).mount("#app")
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style type="text/css">
			#myp{
				width: 200px;
				height: 200px;
				border: 1px solid #ccc;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 绑定一个点击事件 -->
			<button v-on:click="flag=!flag"> 变化 </button>
		    <hr>
			<!-- v-show显示和隐藏（display的CSS属性） -->
			<p id="myp" v-show="flag">我的段落</p>
			
			<!-- v-if 实现元素的隐藏和显示（对dom元素的删除和创建） -->
			<p id="myp" v-if="flag">我的段落</p>
			<!-- v-if \ v-else-if  \ v-else -->
			<p v-if="age>60">老年</p>
			<p v-else-if="age>=40">老年</p>
			<p v-else-if="age>18">少年</p>
			<p v-else>童年</p>
		</div>
		Vue.createApp({
			data(){
				return{
					flag:true,
					age:25
				}
			}
		}).mount("#app")
	</body>
</html>

月疯

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE3.X常用指令

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="../js/vue.js"></script> </head> <body> <div id="app"> <p>{{msg...
复制链接

扫一扫