Vue - 插值 - 指令 - 过滤器 - 计算属性与监听属性 - 购物车案例

目录

一、Vue的插值标签

        1.1 《v-html页面转义》

        1.2 《v-bind绑值》

        1.3 《vue中可以对变量进行二次处理》

        1.4 《Class绑定》

        1.5 《Style绑定》

二、Vue的指令

        2.1 Vue所用数据

        2.2《v-if》与 《v-show》的区别

        2.3《v-for》的使用

三、Vue过滤器

        3.1 定义要用到的数据

        3.2 定义过滤器

        3.3 过滤器串联

        3.4 过滤器传参

四、计算属性与监听属性

        4.1 计算属性

        4.2 监听属性

五、购物车案例

        5.1 购物车案例代码

        5.2 测试

---

一、Vue的插值标签

最基础的其实就是文本的输出，这一个在Leaf昨天的文章里面就已经使用过了；

今天这里就一笔带过啦；

包括关于vue的使用什么的Leaf也都在昨天的文章里面说过了，今天就直接统一来直接使用。

        1.1 《v-html页面转义》

                如果当我们想插入一段html代码时，如果不进行转义的话就会原样输出；

    
《文本》
    {{msg}}
    
《v-html页面转义》
    

转义后：

为了节省不必要的阅读时间，我就不在每一个标签后面都放上运行后的效果图了；

都是一样的使用步骤：

① 先在Vue实例里面定义好数据；

② 再在边界div里添加对应的标签使用。

这里放上插值的Vue实例里定义的所有数据：

        1.2 《v-bind绑值》

《v-bind绑值》

        1.3 《vue中可以对变量进行二次处理》

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

{{num + 2}} 

{{ok ? '7' : '0'}} 

        1.4 《Class绑定》

《Class绑定》
文本内容

        1.5 《Style绑定》

《Style绑定》
文本内容

---

二、Vue的指令

        2.1 Vue所用数据

                这里和前面一样，先放上指令要用到的所有数据；

        2.2《v-if》与 《v-show》的区别

  我们首先要来使用一下这两个指令；

《v-if》

请输入分数：
对应的结果：
不及格
合格
良好
优秀
特别优秀
输入不合法

运行测试成功；

不及格：

及格：

优秀：

接着我们再来使用一下v-show；

《v-show》
请输入结果：
show:展示与否
if:展示与否

输入的是true，标签就显示，反之则不显示。

而我们正是可以通过这个来区分v-if 与 v-show 的区别；

我们输入false，然后按下F12查看一下代码：

我们发现只有使用v-show的span标签是存在的，它是利用display：none把标签隐藏了；

而v-if则是直接没有了；

这就是v-if 与 v-show 的区别。

        2.3《v-for》的使用

                这个标签有点细节，在下拉框和复选框的使用中可以体现出来；

{{l.name}}









{{l.name}}

 注意一下：下拉框是要将v-for写在中的；而复选框则是要在标签的外面再定义一个div标签、并且把v-for写到这个div标签中的，否则会报错。

---

三、Vue过滤器

        3.1 定义要用到的数据

        3.2 定义过滤器

                我们一般就是使用全局过滤器，编写一个过滤器：

我们可以发现过滤器中的value就是Vue实例中定义的值，可以对其进行过滤操作。

我们对value进行截取；

Vue.filter('strSplit',function(value){
    console.log(value);
    return value.substring(0,5);
})

《全局过滤器》

{{msg|strSplit}}

 运行测试：

        3.3 过滤器串联

                同时过滤器还可以叠加进行使用；我们再次定义一个过滤器，在里面打个debugger断点，打印第二个过滤器的value值：

《全局过滤器》

{{msg|strSplit|strSplit2}}

        在边界中使用：

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

请输入第二个数：

结果为：{{addFlag}}

         测试结果：

我们不断的改变输入的值，结果都会随着我们输入的值进行更新，

也就是输入框的单个影响。

        4.2 监听属性

                而监听属性又不一样，他是两个输入框互相影响；

                我们加入监听的模块：

watch:{
     
    km:function(v){
    //:之前的km对应的是被监听的属性，v指的是被监听属性的值
    //当v对应的值发生变化的时候，会执行这个方法
    //v代表千米 this.v != v
    this.m = parseInt(v)*1000
    },
    m:function(v){
    //v代表米
    this.km = parseInt(v)/1000
    }
}

         在边界中使用：

《监听属性》：相互影响
请输入千米：

请输入米：

        测试结果：

---

五、购物车案例

        5.1 购物车案例代码

	
		
		
		
	
	
		

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

			请输入第二个数：

			结果为：{{addFlag}}
			
《监听属性》：相互影响
			请输入千米：

			请输入米：

			
《购物车案例》
			

				

					
物品
					
单价
					
数量
					
小计
				
				

					
洗面奶
					

						{{ximiannaiDj}}
					
					

						
					
					

						{{xXj}}
					
				
				

					
面膜
					

						{{mianmoDj}}
					
					

						
					
					

						{{mXj}}
					
				
				

					
水乳
					

						{{shuiruDj}}
					
					

						
					
					

						{{sXj}}
					
				
				

					
总价：
					

						{{sum}}
					
				
			
		
	
	

        5.2 测试

                运行测试：

小计和总价会随着数量的变化从而不断的跟着更新！