前端vue学习曲线（4）指令

最新推荐文章于 2023-12-28 14:47:02 发布

菜鸟_zhengke

最新推荐文章于 2023-12-28 14:47:02 发布

阅读量135

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_42014192/article/details/98485875

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

指令

1.参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<div id="app1">
	<p v-if="seen">v-if指令：现在可以看到我了</p>
	<h4>#参数</h4>
	<a v-bind:href="url">
		v-bind:href
	</a>
	<button v-on:click="doSomething">
	    v-on:click
	</button>
</div>

2.动态参数

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<div id="app2">
	<h4>#动态参数</h4>
	<a v-bind:[var1]="url">
		v-bind:[var1]==v-bind:href
	</a>
</div>

3.修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<div id="app3">
	<h4>#修饰符</h4>
	<form v-on:submit.once="onSubmit">
		<button>...</button>
	</form>
</div>

例子

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
	<div id="app1">
		<p v-if="seen">v-if指令：现在可以看到我了</p>
		<h4>#参数</h4>
		<a v-bind:href="url">
			v-bind:href
		</a>
		<button v-on:click="doSomething">
				v-on:click
			</button>
	</div>

	<div id="app2">
		<h4>#动态参数</h4>
		<a v-bind:[var1]="url">
			v-bind:[var1]==v-bind:href
		</a>

	</div>

	<div id="app3">
		<h4>#修饰符</h4>
		<form v-on:submit.once="onSubmit">
			<button>...</button>
		</form>
	</div>
</body>

</html>
<script>
	var app1 = new Vue({
		el: "#app1",
		data: {
			seen: true,
			url: 'https://cn.vuejs.org/v2/guide/syntax.html#指令',

		},
		methods: {
			doSomething: function() {
				console.log("123")
			}
		}
	})
	var app2 = new Vue({
		el: "#app2",
		data: {
			var1: 'href',
			url: 'https://cn.vuejs.org/v2/guide/syntax.html#指令'
		}
	})
	var app3 = new Vue({
		el: "#app3",
		data: {

		},
		methods: {
			onSubmit: function() {
				console.log("123");
			}
		}

	})
</script>

菜鸟_zhengke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端vue学习曲线（4）指令

指令1.参数一些指令能够接收一个“参数”，在指令名称之后以冒号表示。<div id="app1"> <p v-if="seen">v-if指令：现在可以看到我了</p> <h4>#参数</h4> <a v-bind:href="url"> v-bind:href </a> <...
复制链接

扫一扫