Vue入门之常用指令

桐花思雨

已于 2022-02-10 16:46:39 修改

阅读量1.2k

点赞数 1

分类专栏：前端 # vue 文章标签： vue.js

于 2022-02-10 12:40:10 首次发布

本文链接：https://blog.csdn.net/weixin_38192427/article/details/122858259

版权

前端同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

`Vue` 常用指令

Vue 指令是以 v- 开头的，作用在 HTML 上将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的 HTML 属性 attribute

下面将介绍 Vue 中常用的几个内置指令。当然，Vue 除了内置指令，也可以根据需求自定义指令

`v-html` 指令

v-html：用于渲染普通文本，能识别解析 HTML 标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-html="msg1"></h2>
			<h2 v-html="msg2"></h2>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg1: '我是msg1',
				msg2: '<span>我是msg2</span>'
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`v-text` 指令

v-text：用于渲染普通文本，但不能识别解析 HTML 标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-text="msg1"></h2>
			<h2 v-text="msg2"></h2>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg1: '我是msg1',
				msg2: '<span>我是msg2</span>'
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`{{ }}` 模板语法

{{ }} 模板语法：不能识别 HTML 标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2>{{msg1}}</h2>
			<h2>{{msg2}}</h2>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg1: '我是msg1',
				msg2: '<span>我是msg2</span>'
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`v-model` 指令

v-model：双向绑定，可以实现表单元素和 Medel 中数据的双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="msg" />
			<h2>{{msg}}</h2>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg: ''
			}
		})
	</script>
</html>

运行结果

input 输入框中也就是 View 层数据发生变动时，下面的 data 部分也就是 Model 数据层也随之发生变动

在这里插入图片描述

`v-bind` 指令

v-bind：是 vue 提供的用于绑定属性的指令。可以简写为：要绑定的指令，如 :title，:class 等，v-bind 只能实现数据的单向绑定。从Model 自动绑定到 View , 无法实现数据的双向绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-bind:title="msg">{{msg}}</h2>
			<input type="text" v-model="msg" />
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg: 'Hello Vue!'
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`v-on` 指令

v-on：指令用于监听 DOM 事件，它的用语法和 v-bind 是类似的，简写形式为 @

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-on:click="run">{{msg}}</h2>
			<!-- 简写形式 -->
			<!-- <h2 @click="run"></h2> -->
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg: 'Hello Vue! 点击我'
			},
			methods: {
				run: function() {
					alert('Hello')
				}
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`v-if，v-else-if，v-else` 判断指令

v-if：如果条件成立就会渲染这个元素，条件不成立就不会渲染这个元素（不渲染的时候 DOM 里面不会出现这个元素）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-if="num > 10">num大于10我就出现</h2>
			<h2 v-else-if="num < 10">num小于10我就出现</h2>
			<h2 v-else>你上边两条都不好使</h2>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				num: 11
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`v-show` 指令

v-show：元素始终会被渲染并保留在 DOM 中，v-show 只是简单的切换元素中的属性 display，如果条件不成立就会自动隐藏 display;none;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-show="num < 10">num小于10我就出现</h2>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				num: 9
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

`v-for` 指令

v-for：循环语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-for="a in msg">{{a.name}}----{{a.sex}}-----{{a.age}} </p>
		</div>
	</body>
	<!-- 1. 导入 vue.js -->
	<script src="js/vue.js" type="text/javascript"></script>
	<script>
		const vm = new Vue({
			el: '#app',
			data: {
				msg: [{
						name: "小花",
						sex: "女",
						age: "18"
					},
					{
						name: "小明",
						sex: "男",
						age: "20"
					}
				]
			}
		})
	</script>
</html>

运行结果

在这里插入图片描述

桐花思雨

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
Vue入门之常用指令

目录`Vue` 常用指令`v-html` 指令Vue 常用指令Vue 指令是以 v- 开头的，作用在 HTML 上将指令绑定在元素上时，会给绑定的元素添加一些特殊行为，可将指令视作特殊的 HTML 属性 attribute下面将介绍 Vue 中常用的几个内置指令。当然，Vue 除了内置指令，也可以根据需求自定义指令v-html 指令v-html：能识别 HTML 标签<!DOCTYPE html><html> <head> <meta chars
复制链接

扫一扫