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代码时，如果不进行转义的话就会原样输出；
<div id="app">
<p>《文本》</p>
{{msg}}
<p>《v-html页面转义》</p>
<div v-html="htmlstr"></div>
</div>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'hello vue!!!',
htmlstr:'<span style="color:red;">文本内容</span>'
}
}
})
</script>转义后：
为了节省不必要的阅读时间，我就不在每一个标签后面都放上运行后的效果图了；
都是一样的使用步骤：
① 先在Vue实例里面定义好数据；
② 再在边界div里添加对应的标签使用。
这里放上插值的Vue实例里定义的所有数据：
<!-- 后面要用到的样式 -->
<style>
.a{
color: deeppink;
}
</style>
<!-- 插值要用到的所有数据 -->
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'hello vue!!!',
htmlstr:'<span style="color:red;">文本内容</span>',
valuestr:'vue值',
str:'hello ward',
num:9,
ok:false,
idstr:'book_',
classStr:'a',
styleStr:'color:red'
}
}
})
</script>1.2 《v-bind绑值》
<p>《v-bind绑值》</p>
<input v-bind:value="valuestr"/>
<input :value="valuestr"/>1.3 《vue中可以对变量进行二次处理》
<p>《vue中可以对变量进行二次处理》</p>
{{str.substring(0,4)}} <br />
{{num + 2}} <br />
{{ok ? '7' : '0'}} <br />1.4 《Class绑定》
<p>《Class绑定》</p>
<span :class="classStr">文本内容</span>1.5 《Style绑定》
<p>《Style绑定》</p>
<span :style="styleStr">文本内容</span>二、Vue的指令
2.1 Vue所用数据
这里和前面一样，先放上指令要用到的所有数据；
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
score:0,
showflag:false,
likes:[
{id:1,name:'摄影'},
{id:2,name:'绘画'},
{id:3,name:'看书'},
{id:4,name:'篮球'}
]
}
}
})
</script>2.2《v-if》与 《v-show》的区别
我们首先要来使用一下这两个指令；
<p>《v-if》</p>
<!-- 输入分数：60以下为不及格，60-70为合格，70-80为良好，80-90为优秀，90以上为特别优秀 -->
请输入分数：<input v-model="score"/>
对应的结果：
<span v-if="score<60">不及格</span>
<span v-else-if="score<70">合格</span>
<span v-else-if="score<80">良好</span>
<span v-else-if="score<90">优秀</span>
<span v-else-if="score<=100">特别优秀</span>
<span v-else="">输入不合法</span>运行测试成功；
不及格：
及格：
优秀：
接着我们再来使用一下v-show；
<p>《v-show》</p>
请输入结果：<input v-model="showflag"/>
<span v-show="showflag">show:展示与否</span>
<span v-if="showflag">if:展示与否</span>输入的是true，标签就显示，反之则不显示。
而我们正是可以通过这个来区分v-if 与 v-show 的区别；
我们输入false，然后按下F12查看一下代码：
我们发现只有使用v-show的span标签是存在的，它是利用display：none把标签隐藏了；
而v-if则是直接没有了；
这就是v-if 与 v-show 的区别。
2.3《v-for》的使用
这个标签有点细节，在下拉框和复选框的使用中可以体现出来；
<!-- 下拉框 -->
<select>
<option v-for="l in likes" :value="l.id">{{l.name}}</option>
</select>
<br /><br /><br /><br /><br />
<!-- 复选框 -->
<div v-for="l in likes">
<input type="checkbox" :value="l.id"/>{{l.name}}
</div>注意一下：下拉框是要将v-for写在中的；而复选框则是要在标签的外面再定义一个div标签、并且把v-for写到这个div标签中的，否则会报错。
三、Vue过滤器
3.1 定义要用到的数据
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
msg:'hello vue!!!'
}
}
})
</script>3.2 定义过滤器
我们一般就是使用全局过滤器，编写一个过滤器：
<script type="text/javascript">
Vue.filter('strSplit',function(value){
console.log(value);
return value;
})
</script>我们可以发现过滤器中的value就是Vue实例中定义的值，可以对其进行过滤操作。
我们对value进行截取；
Vue.filter('strSplit',function(value){
console.log(value);
return value.substring(0,5);
})<p>《全局过滤器》</p>
{{msg|strSplit}}运行测试：
3.3 过滤器串联
同时过滤器还可以叠加进行使用；我们再次定义一个过滤器，在里面打个debugger断点，打印第二个过滤器的value值：
<p>《全局过滤器》</p>
<!-- 过滤器的串联 -->
{{msg|strSplit|strSplit2}}<script type="text/javascript">
Vue.filter('strSplit',function(value){
console.log(value);
return value.substring(0,5);
})
Vue.filter('strSplit2',function(value){
console.log(value);
return value.substring(0,5);
})
我们就可以发现，第二个过滤器打印的value值就是第一个过滤器执行过滤操作后的值；
这就是过滤器的串联。
3.4 过滤器传参
是的，过滤器也可以传参，就这样写：
Vue.filter('strSplit3',function(value,a,b){
console.log(value);
return value.substring(a,b);
})在边界中使用：
<!-- 过滤器传参 -->
{{msg|strSplit3(2,5)}}
<br />
{{msg|strSplit3(6,9)}}测试：传参使用成功
四、计算属性与监听属性
4.1 计算属性
我们先放上需要用到的数据，同时加上计算属性的模块：
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
x:0,
y:0,
km:0,
m:0
}
},
computed:{
//计算属性
addFlag:function(){
return parseInt(this.x) + parseInt(this.y)
}
}
</script>在边界中使用：
<p>《计算属性》</p>
请输入第一个数：<input v-model="x"/><br />
请输入第二个数：<input v-model="y"/><br />
结果为：{{addFlag}}测试结果：
我们不断的改变输入的值，结果都会随着我们输入的值进行更新，
也就是输入框的单个影响。
4.2 监听属性
而监听属性又不一样，他是两个输入框互相影响；
我们加入监听的模块：
watch:{
<!-- 定义km与m两个输入框的函数 -->
km:function(v){
//:之前的km对应的是被监听的属性，v指的是被监听属性的值
//当v对应的值发生变化的时候，会执行这个方法
//v代表千米 this.v != v
this.m = parseInt(v)*1000
},
m:function(v){
//v代表米
this.km = parseInt(v)/1000
}
}在边界中使用：
<p>《监听属性》：相互影响</p>
请输入千米：<input v-model="km"/><br />
请输入米：<input v-model="m"/><br />测试结果：
五、购物车案例
5.1 购物车案例代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
<title></title>
</head>
<body>
<div id="app">
<p>《计算属性》</p>
请输入第一个数：<input v-model="x"/><br />
请输入第二个数：<input v-model="y"/><br />
结果为：{{addFlag}}
<p>《监听属性》：相互影响</p>
请输入千米：<input v-model="km"/><br />
请输入米：<input v-model="m"/><br />
<p>《购物车案例》</p>
<table>
<tr>
<td>物品</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
</tr>
<tr>
<td>洗面奶</td>
<td>
{{ximiannaiDj}}
</td>
<td>
<input v-model="ximiannaiSl"/>
</td>
<td>
{{xXj}}
</td>
</tr>
<tr>
<td>面膜</td>
<td>
{{mianmoDj}}
</td>
<td>
<input v-model="mianmoSl"/>
</td>
<td>
{{mXj}}
</td>
</tr>
<tr>
<td>水乳</td>
<td>
{{shuiruDj}}
</td>
<td>
<input v-model="shuiruSl"/>
</td>
<td>
{{sXj}}
</td>
</tr>
<tr>
<td>总价：</td>
<td colspan="3">
{{sum}}
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
new Vue({
el:'#app',
data(){
return {
x:0,
y:0,
km:0,
m:0,
ximiannaiDj:108,
mianmoDj:89,
shuiruDj:258,
ximiannaiSl:1,
mianmoSl:1,
shuiruSl:1
}
},
computed:{
//计算属性
addFlag:function(){
return parseInt(this.x) + parseInt(this.y)
},
//因为数量会影响小计，小计不会影响数量，所以使用计算属性
xXj:function(){
return parseInt(this.ximiannaiDj) * parseInt(this.ximiannaiSl)
},
mXj:function(){
return parseInt(this.mianmoDj) * parseInt(this.mianmoSl)
},
sXj:function(){
return parseInt(this.shuiruDj) * parseInt(this.shuiruSl)
},
sum:function(){
return parseInt(this.xXj) + parseInt(this.mXj) + parseInt(this.sXj)
}
},
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
}
}
})
</script>
</html>5.2 测试
运行测试：
小计和总价会随着数量的变化从而不断的跟着更新！