指令

最新推荐文章于 2022-09-25 00:21:31 发布

你真好看l

最新推荐文章于 2022-09-25 00:21:31 发布

阅读量135

点赞数

分类专栏： vue的学习

本文链接：https://blog.csdn.net/qq_40052011/article/details/102633121

版权

vue的学习专栏收录该内容

22 篇文章 0 订阅

订阅专栏

常用内置指令：
v:text:更新元素的textContent
v:html:更新元素的innerHTML
v-if:如果为true当前标签才会执行
v-else:如果为false当前标签才会输出到页面
v-show：通过控制display样式来控制显示/隐藏
v-for:遍历数组/对象
v-on:绑定事件监听，一般写为@
v-bind:强制绑定解析表达式，可以省略v-bind
v-model:双向数据绑定
ref:指定唯一标识，vue对象通过$els属性访问这个元素对象
v-cloak:防止闪现表达式，与css配合：[v-cloak]{display:none}

 <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内置指令</title>
		<style type="text/css">
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<div id="test">
			<p ref="content">啦啦啦</p>
			<button type="button" @click="hint">提示</button>
			<!-- <p v-text="msg"></p> -->
			<p v-cloak>{{msg}}</p>
		</div>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			alert("----")
			new Vue({
				el: "#test",
				data:{
					msg: 'lalala'
				},
				methods:{
					hint(){
						alert(this.$refs.content.textContent);
					}
				}
			})
		</script>
	</body>
</html>