vue模板语法

目录

一、插值

1、文本

 2、html(使用v-html指令用于输出html代码)

 3、属性(HTML属性中的值应使用v-bind指令)

4、表达式(Vue提供了完全的JavaScript表达式支持)

 5、class绑定(使用方式：v-bind:class="expression"    expression的类型：字符串、数组、对象)

6、style绑定(v-bind:style="expression"  expression的类型：字符串、数组、对象)

二、指令 

1、指的是带有“v-”前缀的特殊属性

2、核心指令

3、v-if|v-else|v-else-if

 4、v-show

 5、v-for

 三、过滤器

 四、计算属性&监听属性

1、计算属性

 2、监听属性

 五、购物车案例

---

一、插值

1、文本

	
		
		
		
	
	
		

			
文本
			{{msg}}
		
	
	

 2、html(使用v-html指令用于输出html代码)

	
		
		
		
	
	
		

			
html页面转义
			

		
	
	

 3、属性(HTML属性中的值应使用v-bind指令)

	
		
		
		
	
	
		

			
v-bind 属性绑定
			
			
		
	
	

 注：不止value属性任意属性都适用

4、表达式(Vue提供了完全的JavaScript表达式支持)

	
		
		
		
	
	
		

			
vue中可以对变量进行二次处理
			{{str.substring(0,3)}}

			{{num+4}}

			{{ok?'1':'2'}}

			信息
	
	

 5、class绑定(使用方式：v-bind:class="expression"    expression的类型：字符串、数组、对象)

	
		
		
		
		
	
	
		

			
class绑定
			文本
	
	

6、style绑定(v-bind:style="expression"  expression的类型：字符串、数组、对象)

	
		
		
		
	
	
		

			
style绑定
			文本
	
	

二、指令 

1、指的是带有“v-”前缀的特殊属性

2、核心指令

(v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model

3、v-if|v-else|v-else-if

 v-if|v-else|v-else-if：根据其后表达式的bool值进行判断是否渲染该元素

他们只能是兄弟元素

v-else-if上一个兄弟元素必须是v-if

v-else上一个兄弟元素必须是v-if或者是v-else-if

	
		
		
		
	
	
		

			
v-if
			
			请输入分数:
			对应的结果:
			不及格
			合格
			良
			优秀
			优+
			输入不合法
		
	
	

 

 

 

 

 

 4、v-show

 v-show：与v-if类似，只是会渲染其身后表达式为false的元素，而且会给这样的元素添加css代码：style="display:none"

	
		
		
		
	
	
		

			
v-show
			请输入结果:
			展示与否
			展示与否
		
	
	

注：v-show能够形成html串，v-if不行，v-show隐藏了标签，v-if直接就没有了

 5、v-for

v-for：类似JS的遍历，

 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素

 遍历对象: v-for="(value,key,index) in stu", value属性值,key属性名，index下标

	
		
		
		
	
	
		

			
v-for
			
				{{l.name}}
			
			

			

				{{l.name}}
			
		
	
	

 三、过滤器

全局过滤器

Vue.filter('filterName', function (value) {

 // value 表示要过滤的内容

});

局部过滤器

new Vue({

 filters:{'filterName':function(value){}}

});

vue允许你自定义过滤器，被用作一些常见的文本格式化，格式如下：

{{ name | capitalize }}

注1：过滤器函数接受表达式的值作为第一个参数

注2：过滤器可以串联     

{{ message | filterA | filterB }}

注3：过滤器是JavaScript函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

注4：js定义一个类

function Stu(){};

Stu.prototype.add(a,b){};//添加一个新的实例方法

Stu.update(a,b){};//添加一个新的类方法

	
		
		
		
	
	
		

			{{msg|strSplit}}
		
	
	

 

过滤器串联

	
		
		
		
	
	
		

			{{msg|strSplit|strSplit2}}
		
	
	

 过滤器传参

	
		
		
		
	
	
		

			{{msg|strSplit3(4,6)}}
		
	
	

 四、计算属性&监听属性

1、计算属性

	
		
		
		
	
	
		

			
计算属性
			请输入第一个数:

			请输入第二个数:

			结果为:{{addFlag}}
		
	
	

 2、监听属性

	
		
		
		
	
	
		

			
监听属性
			请输入千米:

			请输入米:

		
	
	

 五、购物车案例

	
		
		
		
	
	
		

			
购物车
			

				

					
物品
					
单价
					
数量
					
小计
				
				

					
帽子
					

						{{mzdj}}
					
					

						
					
					

						{{mzxj}}
					
				
				

					
衣服
					

						{{yfdj}}
					
					

						
					
					

						{{yfxj}}
					
				
				

					
裤子
					

						{{kzdj}}
					
					

						
					
					

						{{kzxj}}
					
				
				

					
总价
					
{{zj}}