vue学习笔记002-常用指令

最新推荐文章于 2024-10-09 00:58:21 发布

雾町

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量80

点赞数

分类专栏： vue 文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/weixin_43819595/article/details/118934920

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

总结vue的几个常用指令

1.v-html、v-text

v-html：把文本解析为HTML格式
v-text：把文本解析为TEXT格式

<!DOCTYPE html>
<html>
<head>
	<title>vue入门</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="box">
		<div>{{msg}}</div>
		<div v-html="msg"></div>
		<div v-text="msg"></div>
	</div>
</body>

<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			msg:"<h1>hello vue</h1>"
		}
	});
</script>
</html>

2.v-bind、v-on

v-bind：给标签绑定属性值
v-on：给标签绑定事件

<!DOCTYPE html>
<html>
<head>
   <title>vue入门</title>
   <script src="vue.js"></script>
   <style type="text/css">
   	.isRed{
   		border: solid 1px red;
   	}
   </style>
</head>
<body>
   <div id="box">
   	<a v-bind:href="url">百度一下</a><br>
   	<!-- v-bind:href/class可以缩写成:href/class -->
   	<a :href="url">百度一下</a><br>
   	<div :class="cls">我是一个div</div>
   </div>

   <div id="box2">
   	<div>{{name}}</div>
   	<div>{{sex}}</div>
   	<button v-on:click="changeName()">修改姓名</button>
   	<!-- v-on:click可以缩写成@click -->
   	<button @click="changeSex()">修改性别</button>
   </div>
</body>

<script type="text/javascript">
   let vm = new Vue({
   	el:"#box",
   	data:{
   		url:"https://baidu.com",
   		cls:"isRed"
   	}
   });

   let vm2 = new Vue({
   	el:"#box2",
   	data:{
   		name:"张三",
   		sex:"男"
   	},
   	methods:{
   		changeName(){
   			this.name = "李四";
   		},
   		changeSex(){
   			this.sex = "女";
   		}
   	}
   });
</script>
</html>

3.v-if、v-else-if、v-else

条件渲染，判定为true时渲染，否则不渲染。

<!DOCTYPE html>
<html>
<head>
	<title>条件渲染</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="box">
		<div v-if="num % 3 == 0">div1</div>
		<div v-else-if="num % 3 == 1">div2</div>
		<div v-else="num % 3 == 2">div3</div>
	</div>
</body>

<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			num:11,
		}
	});
</script>
</html>

4.v-for

列表渲染，遍历容器的元素或对象的属性
语法：element in elements

<!DOCTYPE html>
<html>
<head>
   <title>列表渲染</title>
   <script src="vue.js"></script>
</head>
<body>
   <div id="box">
   	<ul>
   		<li v-for="name in names">{{name}}</li>
   		<br>
   		<li v-for="value in students">{{value}}</li>
   	</ul>
   </div>
</body>

<script type="text/javascript">
   new Vue({
   	el:"#box",
   	data:{
   		names:["张三","李四","王五"],
   		students:{
   			name:"张三",
   			age:22,
   			hobby:"睡觉"
   		}
   	}
   });
</script>
</html>

5.v-model

在表单元素上创建双向数据绑定

 <!DOCTYPE html>
<html>
<head>
   <title>表单绑定</title>
   <script src="vue.js"></script>
</head>
<body>
   <div id="box">
   	<form autocomplete="off">
   		姓名：<input type="text" name="username" v-model="username">
   		<br>
   		年龄：<input type="number" name="age" v-model="age">
   	</form>
   </div>
</body>

<script type="text/javascript">
   new Vue({
   	el:"#box",
   	data:{
   		username:"李四",
   		age:18
   	}
   });
</script>
</html>

6.v-show

 <!DOCTYPE html>
<html>
<head>
	<title>vue入门</title>
	<script src="vue.js"></script>
</head>
<body>
	<div id="box">
		<button v-on:click="show()">显示内容</button>
	</div>
</body>

<script type="text/javascript">
	new Vue({
		el:"#box",
		methods:{
			show(){
				alert("啥时候下课啊啊啊");
			}
		}
	});
</script>
</html>