系列文章目录
文章目录
- 系列文章目录
- 一、条件渲染
- 二、v-for
- 三、key
- 四、数组的检测与更新
- 五、事件修饰符
- 六、js的四种for循环方式
一、条件渲染
vue中对标签使用
v-if、v-else-if、v-else
使用时与if判断相仿
v-if中的值来决定该标签的显示
<div v-if="good_list.length>0"> 通过判断good_list的长度来决定是否显示表格
<table class="table table-hover">
<thead>
<tr>
<th>商品名</th>
<th>商品价格</th>
<th>商品数量</th>
</tr>
</thead>
<tbody>
<tr v-for="item in good_list">
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.count}}</td>
</tr>
</tbody>
</table>
</div>
二、v-for
v-for 循环对象是一个字符串时,结果为字符串的第一个字母到最后一个
v-for 循环对象是一个数值型时,结果为1到该数值
v-for 循环对象是一个数组时,结果为数组第一个到数组最后一个
v-for 循环对象是一个对象时,结果为对象的vlaue值从第一个到最后一个(js中对象是以vaue,key 的形式来的)
<div id="app">
<table>
<thead>
<tr>
<th>商品名</th>
<th>商品单价</th>
<th>商品数量</th>
<th>全选/全不选 <input type="checkbox" @change="chooise_all();summation1()" v-model="chooiseAll"></th>
</tr>
</thead>
<tbody>
<tr v-for="commodity in commoditys"> 根据commodity数组来确定列表有多少列
<td>{{commodity.name}}</td>
<td>{{commodity.price}}</td>
<!-- 计算机把小数转换成二级制,会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候,变成了一个无限循环的数字。-->
<td><button @click="reduce_commdity(commodity)">-</button>{{commodity.number}}<button @click="commodity.number++;summation1()">+</button></td>
<td><input type="checkbox" @change="chooise_one();summation4()" v-model="lists" :value="commodity"></td>
</tr>
</tbody>
</table>
<p>总计:{{sum}}¥</p>
</div>
三、key
key在vue中是唯一值的形式存在的,为标签绑定一个key后,每次数据变化导致vm层的虚拟DOM文档发生变化时,如果变化部分有key,虚拟DOM就不会整个替换一次DOM文档(此时使用了diff算法),只会根据变化标签的key来进行局部DOM文档替换。
四、数组的检测与更新
$set是用于解决vue的数据双向绑定失效问题的。
只要值的地址没有改变,vue是检测不到数据变化的。
这个时候需要用到$set来解决
vm.$set(改变值的对象,原来的值/索引,修改的值)
vm.$set( target, propertyName/index, value )
五、事件修饰符
修饰符 | 作用 |
.stop | 只处理自己的事件,父控件冒泡的事件不处理(阻止事件冒泡) |
.self | 只处理自己的事件,子控件冒泡的事件不处理 |
.prevent | 阻止a链接的跳转 |
.once | 事件只会触发一次(适用于抽奖页面) |
六、js的四种for循环方式
第一种使用索引for循环
//循环方法一传统for循环
summation1() {
var sums = 0
for(i=0;i<this.lists.length;i++){
sums += this.lists[i].price * this.lists[i].number
}
this.sum = sums
},
第二种for in
//循环方法二for in循环 此处in获取到的是对应数组的下标
summation2() {
var sums = 0
for(index in this.lists){
sums += this.lists[index].price * this.lists[index].number
}
this.sum = sums
},
第三种for of
//循环方法三 for of循环
summation3(){
var sums = 0
for(commodity of this.lists){
sums += commodity.price * commodity.number
}
this.sum = sums
},
第四种是对象的方法,来实现循环
//循环方法四 foreEach 获取到的值第一个为vlaue第二个为下标
summation4(){
var sums = 0
this.lists.forEach(function (value, index) {
sums += value.price * value.number
})
this.sum = sums
},