vue的几种常见指令及使用方法

爬楼梯的小新

已于 2022-01-21 12:16:01 修改

阅读量1.1k

点赞数

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

于 2021-07-14 17:19:58 首次发布

本文链接：https://blog.csdn.net/weixin_57607714/article/details/118732671

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

v-on 点击事件

v-on 简写是 @click

click单击事件(掌握) dblclick 双击事件双击才可出弹框(了解)

    <body>
		<div id ="app">
			<button type="button" @click="btn">点我出弹框</button>
	        <button type="button" @dblclick="btn">双击出弹框</button>
		</div>
		<script>
		   var app = new Vue ({
			   el:"#app",
			   data:{
				   
			   },
			   methods:{
				   btn:function(){
					   alert('你好')
				   }
			   }
		   })
		</script>
	</body>

v-if 显示与隐藏

由于v-if 和v-show 都有显示与隐藏的功能这里放到一起来说

v-if 和v-show 为true显示为false隐藏

区别：为true时就显示为false时 v-if在页面和控制台都隐藏不会有对应的元素在dom中

v-show只在页面隐藏

选择：当需要显示与隐藏之间切换很频繁时用v-show

当只有一次切换时通常使用v-if

<body>
	<div id = "app">
		<h2 v-if="isIf">{{message}}</h2>
		<h2 v-show="isShoww">{{msg}}</h2>
       <div v-if="isIf=true">{{name}}</div>  //想要显示为true即可
		
	</div>
	
	<script>
	var app = new Vue({
			el:"#app",
			data:{
				isIf:false,
				isShow:false,
				message:'你好 我是v-if',
				msg:'你好 我是v-show'
	
			},
			methods:{
				
			}
		})
		
	</script>
</body>

穿插一下：v-if和v-else的使用

v-else 只会在v-if为false时显示 简言之前者为fasle时后者显示前面为true时后者隐藏

在使用场景中可以用作切换按钮具体详细用法：用户点击按钮切换登录类型

<body>
	<div id = "app">
		<h2 v-if="isIf">{{message}}</h2>
		<h1 v-else>v-if 为false 显示我</h1>
	</div>
	
	<script>
	var app = new Vue({
			el:"#app",
			data:{
				isIf:false
	
			},
			methods:{
				
			}
		})
	</script>
</body>

v-show 显示与隐藏

可用于关闭广告或者遮罩层之类

案例：设置一个点击按钮点击之后按钮显示或隐藏

<body>
	<div id ="app">
		<img v-show="isShow" src="./img/goods.png" alt="">
		<button @click="changeIsShow">显示与隐藏</button>
         <!--也可以直接点击按钮进行取反 效果一样
         <button @click="isShow=!isShow">切换</button>-->
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				isShow:true  //默认显示
			},
			methods:{
				changeIsShow:function(){
					this.isShow = !this.isShow;   //取反值
				} 
			}
		})
	</script>
</body>

v-model 双向绑定

v-model 里输入的值等于要同步显示里的插值一样(也就是下图红色画线圈住的部分 message命名一样) 即可实现双向绑定

便捷的设置和获取表单元素的值绑定的数据会和表单元素的值相关联换句话说绑定数据更改或者表单元素里的内容更改另一个就会随之更改

绑定的数据<=>表单元素的值

案例1:

<body>
	<div id ="app">
		<input type="text"  v-model="message"/>
		<h2>{{message}}</h2>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				message:"双向绑定"
			},
			methods:{
				
			}
		})
	</script>
</body>

案例2：点击选择性别按钮显示出对应性别

！！！这个要在input表单里写上value 男女值才能实现同步渲染效果

<body>
	<div id = "app">
		<label for="nan">
			<input type="radio" value="男" name="user" v-model="sex"/>男
		</label>
		<label for="nv">
			<input type="radio" value="女" name="user" v-model="sex"/>女
		</label>
		<h3>你选择的性别是:{{sex}}</h3>
	</div>
	
	<script>
	var app = new Vue({
			el:"#app",
			data:{
				sex:'男'   //默认男
			}
		})
	</script>
</body>

v-html

可以通过url直接传递网页地址不过有风险不是很建议使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 
	</head>
	<body>
		<div id="app">
			<h6 v-html="url"></h6> 
		</div>
		<script>
			const app = new Vue ({
				//el属性 决定了这个vue对象挂载到哪一个元素上
				el:'#app',
				data:{
					url:'<a href="http://www.baidu.com">百度一下</a>'
				}
			})
		</script>
	</body>
</html>

v-pre

不经过渲染直接显示的内容

	<body>
		<div id="app">
            <h2>{{message}}</h2>
			<h2 v-pre>{{message}}</h2>
		</div>
		<script>
			const app = new Vue ({
				el:'#app',
				data:{
                    message：'你好'
				}
			})
		</script>
	</body>

v-bind

定义一张图片把图片渲染到页面上

这个是在uniapp小程序上的写的但是使用方法和vue一样

<template>
	<view>
        <!-- v-bind:src   v-bind可省略 -->
		<image :src="img"></image>
	</view>
</template>


<script>
	export default {
		data() {
			return {			            
                img："https://gimg2.baidu.com"  //在此输入图片地址
			}
		}
	}
</script>

v-for

在date中定义一个数组将数组渲染到页面上

//index 索引从0开始的

<body>
  <div v-for="(item,index) in arr" :key="item.id">
       名字:{{item.uname}},年龄:{{item.age}}
  </div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            arr: [{
                uname: '托尼',
                age: 18
            },
            {
                unmae:'章三',
                age: 28
            }]
        }
    })
</script>