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

v-on  点击事件

v-on 简写是 @click

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

    
		

			点我出弹框
	        双击出弹框
		
		
	

v-if  显示与隐藏 

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

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

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

           v-show只在页面隐藏

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

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

	

		
{{message}}
		
{{msg}}
       
{{name}}
  //想要显示为true即可
		
	
	
	

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

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

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

	

		
{{message}}
		
v-if 为false 显示我
	
	
	

v-show 显示与隐藏

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

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

	

		
		显示与隐藏
         
	

v-model 双向绑定 

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

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

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

案例1:

	

		
		
{{message}}
	

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

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

	

		
			男
		
		
			女
		
		
你选择的性别是:{{sex}}
	
	
	

v-html

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

v-pre

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

	
		

            
{{message}}
			
{{message}}
		
		
	

v-bind

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

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

v-for 

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

//index  索引 从0开始的

  

       名字:{{item.uname}},年龄:{{item.age}}