Vue常用指令

智.

已于 2022-06-19 11:04:49 修改

阅读量265

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-06-19 11:02:54 首次发布

本文链接：https://blog.csdn.net/m0_67186884/article/details/125355316

版权

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: '你好啊!'
			}
		})
	</script>
</html>

运行结果

`v-on` 指令

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./vue.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <button v-on:click="fn">显示隐藏</button>
        <div class="box" v-show="bool"></div>
    </div>

    <script>
        //创建Vue实例,得到 ViewModel
        var vm = new Vue({
            el: '#app',
            data: {
                bool: false
            },
            methods: {
                fn() {
                    this.bool = !this.bool;
                }
            }
        });
    </script>
</body>

</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>

运行结果