二、本地应用——Vue指令（1）

最新推荐文章于 2024-04-29 10:42:46 发布

Sean_me

最新推荐文章于 2024-04-29 10:42:46 发布

阅读量70

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/easy_bird/article/details/118882826

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、内容绑定、事件绑定

v-text的作用是设置标签的内容（textContent），使用插值表达式——{{}}可替换指定的内容，内部支持写表达式。

案例1：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h2 v-text="message+'hahaha'">orange</h2>
			<h2 v-text="info+'wowowo'">orange</h2>
			<h2>{{ message + "heiheihei" }}orange</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					message:"Hi Sean!",
					info:"Nice to meet you!"
				}
			})
		</script>
	</body>
</html>

效果：

2. v-html指令的作用是设置元素的innerHTML，内容中有html结构会被解析成标签，v-text指令无论内容是什么，都会被解析为文本。

案例2：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<p v-html="content"></p>
			<p v-text="content"></p>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					content:"<a href='https://cn.bing.com/?mkt=zh-CN'>Bing</a>"
				}
			})
		</script>
	</body>
</html>

效果：

3. v-on指令的作用是为元素绑定事件，事件名不需要写on，指令可简写为@，绑定的方法定义在method属性中，方法内部通过this关键字访问定义在data中的数据。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="v-on指令" @click="success"/>
			<input type="button" value="双击事件" @dblclick="success"/>
			<h2 @click="changeFood">{{ food }}</h2>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					food:"土豆丝儿"
				},
				methods:{
					success:function(){
						alert("succeed");
					},
					changeFood:function(){
						this.food+="吃呀吃";
					}
				},
				
			})
		</script>
	</body>
</html>

效果：

v-on补充：事件绑定的方法写成函数调用的形式，可以传入自定义参数，定义方法时需要定义形参来接收传入的实参，事件的后面跟上 .修饰符可以对事件进行限制，.enter可以限制触发的案件为回车，事件修饰符有多种。详见官网：https://cn.vuejs.org/v2/api/#v-on

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<input type="button" value="点击" @click="doIt(666,'niua')"/>
			<input type="text" @keyup.enter="sayHi()"/>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					doIt:function(p1,p2){
						console.log(p1);
						console.log(p2);
					},
					sayHi:function(){
						alert("饭否？");
					}
				}
			})
		</script>
	</body>
</html>

Sean_me

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
二、本地应用——Vue指令（1）

1、内容绑定、事件绑定v-text的作用是设置标签的内容（textContent），使用插值表达式——{{}}可替换指定的内容，内部支持写表达式。案例1：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div id="app"> ...
复制链接

扫一扫