vue——条件渲染、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
},