Vue基本格式及常用V-指令

目录

常用指令例子v-on:click

v-model(双向绑定，即其中一方改变值，另一方也随之改变)

例子2:

v-show

v-for

v-bind(绑定元素)其中一种写法

获得当前点击对象

v-for渲染填充值，并通过click动态改变样式例子

---

 

	
	
     //先导入vue.js
	


    //确定vue的作用于是下面这个div id是box，显示数据的格式是 {{内容}}
	
{{mess}}
	

例子：

	
	



	

		//{{}}里面可以进行基本运算，还能用三元表达式
		
Messagee:{{mess}}
		
{{num+1}}
		
{{flag==true?"yes":"no"}}
	
	

常用指令例子
v-on:click
 

	
	
	


	

		
{{mess}}
		//通过点击指令调用方法v-on:click类似onclick方法，可以简写为@click
		//若方法没有参数可以传，则可以省略括号
		倒叙
	
	

v-model(双向绑定，即其中一方改变值，另一方也随之改变)

	
	



	

		//v-model指向data里面的对象，这个key的value可以为空("")，但必须要有
		
		//对应显示的数据，在上面input改变的值，会在这里实时更新改变
		
{{name}}
	
	

例子2:

	
	
	


	

	

		

		
用户名:
		
密码: 
		
性别: 男 女
		
爱好(多选按钮): 吃
			玩
			睡觉
			唱歌
		

	
	
	

		
表单内容如下
		
用户名:{{lname}}
		
密码:{{lpassword}}
		
性别:{{sex}}
		
爱好(多选):{{love}}
		
	
	
	

v-show

	
	
	
	


	

		
Edit Me
			//v-show的值为true则显示，为false则隐藏，这里是用@click动态改变flag的值
		
		
{{mess}}
		
		
	

	

v-for

	
	
	


	

		

			//动态渲染格式为 (自定义数据名,下标) in 数据/集合 {{这些写的是自定义数据名}}
			
{{jingdong}}
		
	
	

v-bind(绑定元素)

其中一种写法

	
	
	
	
	


	

		

			//动态绑定属性class，里面的参数也必须为data里面存在的key
			
{{data1}}
		
		

	
	

获得当前点击对象

	
	
	
	


	

		

			
李师傅3000
			
吴师傅1000
			
陈师傅2000
			
赵师傅2200
		
		
Total:{{dd}}
	
	

v-for渲染填充值，并通过click动态改变样式例子
 

	
	
	
	
	


	

		

		封面
		带文字的
		
{{dd.title}}