Vue模板语法上集（02）

今日份分享内容：

一、插值（该代码块会放在末尾一并展示）

1、文本插值

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

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

 4、表达式

  5、class 样式绑定

二、指令

1、 v-if

2、 v-show

 3、v-for：类似JS的遍历  

 三、过滤器

.filter

四、计算属性与监听器

1、计算属性  computed:{}

2、监听属性 watch：{}

 五、购物车案例

---

一、插值（该代码块会放在末尾一并展示）

1、文本插值

{{msg}} 

效果展示：

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

 

 所以需要添加v-html属性：

        

 运行效果展示：

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

 三种属性绑定值：

value        直接输出值

v-bind:value        引用定义的变量值

:value                引用定义的变量值

任意属性都可以引用定义的变量值 

 运行效果展示：

 4、表达式

Vue提供了完全的JavaScript表达式支持

截取字段： substring

数值增加：+

三元运算符： ？_：_

字符串拼接： +

如图所示：

效果展示：

  5、class 样式绑定

有两种方式：

①使用id标签（.）/ 类标签（#）

效果展示：

 ②调用 定义的变量值

 这里注意的是，我们引用的自定义变量的值也是从前面定义的id标签里来的！

 效果展示：

 6、style绑定

：style 

 效果展示：

代码块展示：

	
		
		
		
		
	
	
		
		

			
文本插值
			{{msg}}

			
html页面转义
			


			
v-bind 属性绑定
			

			

			
			
vue中可以对变量进行二次处理（也可使用js语法）
			{{bb.substring(0,4)}}

			{{cc + 4}}

			{{dd ? '1':'0'}}

			书籍信息
			
class样式绑定
			我是一杯咖啡
			我是一杯咖啡
			我是红色的咖啡
		
	
	

 

二、指令

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

1、 v-if

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

他们只能是兄弟元素

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

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

 效果展示：

 

2、 v-show

面试题：

        v-show与v-if的区别？

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

 

 3、v-for：类似JS的遍历  

 遍历数组: v-for="item in items", items是数组，item为数组中的数组元素（可自定义变量名）

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

下拉框模式：

效果展示：

 多选框模式：

效果展示：

代码块展示：

	
		
		
		
	
	
		
		

			
v-if
			
			请输入分数：
			对应的结果：
			不及格
			合格
			良
			优秀
			优+
			输入不合法
			
v-show
			请输入结果：
			show：展示与否
			
v-for
			
				{{l.name}}
			

			

				{{l.name}}
			
		
	
	
	

 

 三、过滤器

.filter

 

 在过滤器中也可以进行截取：

 效果展示：

过滤器的串联：同时运行两个过滤器

效果展示：

 

代码块展示：

	
		
		
		
	
	
		
		

			
过滤器
			{{msg|strSplit|strSplit2}}
		
	
	
	

 

四、计算属性与监听器

1、计算属性  computed:{}

 计算属性可用于快速计算视图（View）中显示的属性。这些计算将被缓存，并且只在需要时更新

效果展示：

 

 当我任意输入一个数字的时候：

2、监听属性 watch：{}

 监听属性 watch，我们可以通过 watch 来响应数据的变化

效果展示：

默认值为0时：

 

 设置值时：

 代码块展示：

	
		
		
		
	
	
		
		

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

			请输入第二个数：

			结果为：{{addFlag}}
			
监听属性
			请输入第km数：

			请输入第m数：

		
	
	
	

 

计算属性：一方影响另一方
监听属性：相互影响

小结：计算属性和监听属性的区别

         自己的理解

         computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；

         computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，

         举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减少或增多或删除商品，总金额都应该发生变化。这里的这个总金额使用computed属性来进行计算是最好的选择。

         与watch之间的区别：

    刚开始总是傻傻分不清到底在什么时候使用watch，什么时候使用computed。这里大致说一下自己的理解：

         watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，

        那么对比一下,我们很容易得出computed(计算属性)和watch(监听属性)都存在缓存机制的,性能都处优先选择,那么这两者哪个更好呢?

        上述很容易得出监听属性比计算属性复杂的多!因此在一个项目同时可以使用计算属性,methods和监听属性实现时候我们优先使用计算属性其次是监听属性,最后选择methods!

 五、购物车案例

	
		
		
		
		
	
	
		
		

			

				

					
物品
					
单价
					
数量
					
小计
				
				

					
帽子
					

						{{maozidanjia}}
					
					

						
					
					
{{moazixiaoji}}
				
				

					
衣服
					
 
						{{yifudanjia}}
					
					

						
					
					
{{yifuxiaoji}}
				
				

					
裤子
					

						{{kuzidanjia}}
					
					

						
					
					
{{kuzixioaji}}
				
				

					
总价{{zongjia}}
					

				
			
		
	
	

 

效果展示：

 

更改数量之后： 

 

 OK，今天的内容就分享到此啦，希望本篇内容对您有所帮助！

我们下期再见~

下期内容【Vue语法模板下集】。