Vue中常用指令

最新推荐文章于 2024-07-27 21:12:19 发布

我与代码的故事

最新推荐文章于 2024-07-27 21:12:19 发布

阅读量716

点赞数

分类专栏：前端文章标签：前端 vue.js html5 es6 html

本文链接：https://blog.csdn.net/xing7290/article/details/107083280

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

一：前言

在Vue的学习使用中，我们经常会使用到一些"v-"开头的指令。
因此，笔者在本文将会列举出常用v-指令及其使用方法。

二：操作

1.概念：

v-指令是带有v-前缀的特殊属性，通过属性来操作元素。

2.指令分类

①.条件
v-if：根据其后表达式的bool值判断是否渲染该元素。
v-show：根据其后表达式的bool值判断元素的display属性是否为none。
v-if是将dom元素整个添加或删除，而v-show是通过设置dom元素的display属性控制显示或者隐藏。

②.循环
v-for：循环遍历，输出目标值。

<p v-for="(item,i) in list">{{i}}:{{item}}</p>//i是索引值，item是每一项的值

③.更新元素
v-text：更新元素的值。
v-html：更新元素的值和html标签。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>test</title>
		<script src="vue.js" type="text/javascript" charset="UTF-8"></script>
	</head>
	<body>
		<div id="app">
			v-text的：<p v-text="message">{{message}}</p>  
			<hr/>
			v-html的：<p v-html="message"></p>
		</div>
		<script type="text/javascript">
		       var app = new Vue({
		       el: '#app', //element
		       data: {
		            message: '<h1>Hello</h1> Vue!'
		           }
		       })
		</script>
	</body>
</html>