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

最新推荐文章于 2024-11-04 15:22:25 发布

Sean_me

最新推荐文章于 2024-11-04 15:22:25 发布

阅读量110

点赞数

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

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

版权

Vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了Vue.js中的v-text、v-html指令及其区别。v-text用于设置元素的textContent，而v-html则会解析内部的HTML结构。此外，还讲解了v-on指令用于事件绑定，包括点击、双击事件及方法传递参数，以及如何使用事件修饰符限制事件触发条件。示例代码展示了这些指令的实际应用。

摘要由CSDN通过智能技术生成

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>