vue常用指令

最新推荐文章于 2024-02-01 10:31:41 发布

ernesto_ji

最新推荐文章于 2024-02-01 10:31:41 发布

阅读量183

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/qq_38407462/article/details/104488230

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

vue常用指令

1、v-model：双向数据绑定(即：将vue实例的数据属性值与html元素的值进行绑定，一起发生变化)，一般用于表单元素。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  用户名： <input type="text" v-model="name" />
	&nbsp;&nbsp;&nbsp;
	{{name}}
	</br>
	密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text" v-model="value" />
	&nbsp;&nbsp;&nbsp;
	{{value}}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    name: 'ernesto',
	value: '123'
  }
})
</script>
</body>
</html>

改变任意一个html元素的值，那么与其v-model绑定的vue实例的属性值就会发生对应的变化，进而其它的与该vue实例的该属性v-model绑定的html元素的值也会发生响应的变化
在这里插入图片描述
2、v-for：循环遍历
遍历数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="value in arr">{{value}}</li>
	</ul>
	
	//值和索引
	<ul>
		<li v-for="(v,k) in arr">{{v}} -  {{k}}</li>
	</ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	  arr:[1,3,5,7,9,10,13]
  }
})
</script>
</body>
</html>

在这里插入图片描述
遍历对象

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	//属性值
	<ul>
		<li v-for="value in user">{{value}}</li>
	</ul>
	
	//属性名称  属性值
	<ul>
		<li v-for="(v,k) in user">{{k}} -  {{v}}</li>
	</ul>
	
	//属性名称  属性值  索引
	<ul>
		<li v-for="(v,k,index) in user">索引{{index}}属性名称{{k}}属性值{{v}}</li>
	</ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	  user:{id:114,name:'ernesto',age:32}
  }
})
</script>
</body>
</html>

在这里插入图片描述
遍历对象数组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	<ul>
		<li v-for="stu in student">{{stu}}</li>
	</ul>
	
	<ul>
		<li v-for="stu in student">{{stu.no}} -  {{stu.name}} -  {{stu.age}}</li>
	</ul>
	
	<ul>
		<li v-for="(v,k,index) in student">索引{{index}}名称简称{{k}}学生信息{{v}}</li>
	</ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
	  student:{
	  		zhengsan:{no:1,name:'张三',age:15},
	  		lisi:{no:2,name:'李斯',age:44},
	  		wangsu:{no:3,name:'王素',age:22}
	  }
  }
})
</script>
</body>
</html>

在这里插入图片描述
在使用v-for遍历时，可以通过:key来给每一项(即:每一个key-value或每一个元素)唯一绑定一个标识来提高vue效率。当数据发生变化时，vue就通过这个标识来找出未发生变化的元素，而不需要把所有的元素都重新罗列一遍。

<ul>
		<li v-for="(v,k,index) in student" :key="k">索引{{index}}名称简称{{k}}学生信息{{v}}</li>
	</ul>

3、v-on：事件绑定。一般用法为v-on:事件=“函数”。可简写为@事件=“函数”。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	//方法无参数可省略括号
	</br>
	<button v-on:click="showMeOne">点我1</button>
	</br>
	<button @click="showMeTwo">点我2</button>
	
	</br>
	<button @click="add">添加元素</button>{{array}}
</div>

<script>
var temp = new Vue({
  el: '#app',
  data: {
	  array:[1,3,5,7]
  },
	methods:{
		showMeOne(){
			console.log('hello vue 1')
		},
		showMeTwo:function(){
			console.log('hello vue 2')
		},
		add(){
			console.log(temp==this);
			this.array.push(11);
			temp.array.push(22);
		}
	}
})
</script>
</body>
</html>

在这里插入图片描述
v-show/v-if：显示或隐藏元素(true显示，false隐藏)。v-show是通过设置display来实现的；而v-if是直接删除然后再重新创建来实现的。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
	</br>
	<button v-on:click="flag=!flag">点我1</button>
	</br>
	<div v-show="flag" style="width:100px;height:100px;background-color:red">v-show测试</div>
	</br>
	<div v-if="flag" style="width:100px;height:100px;background-color:blue">v-if测试</div>
</div>

<script>
var temp = new Vue({
  el: '#app',
  data: {
	  flag:true
  }
})
</script>
</body>
</html>

在这里插入图片描述

ernesto_ji

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue常用指令

vue常用指令1、v-model：双向数据绑定(即：将vue实例的数据属性值与html元素的值进行绑定，一起发生变化)，一般用于表单元素。<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://unpkg.com/vue/dist/vue.js"&g...
复制链接

扫一扫

专栏目录