v-for更新监测
//1.数组翻转
//2.数组截取
//3.更新值
<template>
<div>
<ul>
<li v-for='(item,index) in arr'>{{item}}</li>
</ul>
<button @click='reBtn'>翻转</button>
<button @click='jBtn'>截取前三个</button>
<button @click='upBtn'>点击改掉第一个元素的值</button>
</div>
</template>
export default {
data(){
return{
arr:[1,2,3,4,5]
}
}
}
//触发v-for的数组方法
//push():将一个或多个元素添加到数组的末尾，并返回该数组的新长度.
//pop():从数组中删除最后一个元素，并返回该元素的值
//shift():从数组中删除第一个元素，并返回该元素的值
//unshift():将一个或多个元素添加到数组的开头，并返回该数组的新长度
//splice():删除几个元素的值，如果不屑则代表从起始位置删带最后，并返回删除的数组，第二个省略，则代表一直删除到最后，当索引为赋值的时候，代表数组中倒数第几个元素
//sort():数组的每一项排序
//reverse():将数组翻转
/*不会触发
fliter():过滤
concat():用于连接两个或多个数组。 该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本
slice()：以新的数组对象，返回数组中被选中的元素,不会给吧原数组
*/
//数组方法会改变原数组的，就会导致v-for更新,页面更新.数组方法不会改变原数组，而是返回新数组,就不会导致v-for更新,可采用覆盖数组或this.$set()
v-for无key
//从第二个往后更新内容--性能不高
<template>
<div>
<ul>
<li v-for='str in arr'>
{{str}}
<input type='texe'>
</li>
</ul>
<button @click='addFn'>下标1的位置新增一个</button>
</div>
</template>
export default {
data(){
return{
arr:[1,2,3,4,5]
}
}
}
有key属性，值唯一不充分的字符串或数字
基于key的来比较新旧虚拟DOM,移出key不存在元素 给每个数据对象换成对象，准备id,把id的值作为key
<ul>
<li v-for='item in arr' :key='item.id'>
{{item.name}}
<input type='text'>
</li>
</ul>
//key:有id用id，没id用索引
动态class,用v-bind给标签class设置动态的值
//语法：:class='{类名:布尔值}'
<template>
<div>
<p :class='redStr:true,:bool'>值为true，redStr类名生效</p>
</div>
</template>
//
export default {
data(){
return{
redStr:true,
}
}
}
//
<style>
.redStr {
color:red;
}
</style>
动态style.给标签动态设置style的值
//语法: :style='{css属性名:值}'
<template>
<div>
<p :style='{color:colorStr}'>value变量的值,将被赋予给css属性的key生效</p>
</div>
</template>
//
export default {
data(){
return{
colorStr:red,
}
}
}
<template>
<!-- 要引入import "bootstrap/dist/css/bootstrap.css" -->
<div id="app">
<div class="container">
<!-- 顶部框模块 -->
<div class="form-group">
<div class="input-group">
<h4>品牌管理</h4>
</div>
</div>
<!-- 数据表格 -->
<table class="table table-bordered table-hover mt-2">
<thead>
<tr>
<th>编号</th>
<th>资产名称</th>
<th>价格</th>
<th>创建时间</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{ item.id }}</td>
<td>{{ item.name }}</td>
<!-- 如果价格超过100，就有red这个类 -->
<td :class="{ red: item.price > 100 }">{{ item.price }}</td>
<td>{{ item.time | getDate }}</td>
<td><a href="#" @click="del(item.id)">删除</a></td>
</tr>
<tr>
<td>统计：</td>
<td colspan="2">总价格为：{{ sum }}</td>
<td colspan="2">平均价为：{{ average }}</td>
</tr>
</tbody>
<tfoot v-show="!list.length">
<tr>
<td colspan="5" style="text-align: center">暂无数据</td>
</tr>
</tfoot>
</table>
<!-- 添加资产 -->
<form class="form-inline">
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="资产名称"
v-model="obj.name"
/>
</div>
</div>
<div class="form-group">
<div class="input-group">
<input
type="text"
class="form-control"
placeholder="价格"
v-model.number="obj.price"
/>
</div>
</div>
<!-- 阻止表单提交 -->
<button class="btn btn-primary" @click.prevent="btnAdd">
添加资产
</button>
</form>
</div>
</div>
</template>
<script>
//引入moment
import moment from "moment";
export default {
data() {
return {
//名称
name: "",
//价格
price: 0,
list: [
{ id: 100, name: "外套", price: 199, time: new Date("2010-08-12") },
{ id: 101, name: "裤子", price: 34, time: new Date("2013-09-01") },
{ id: 102, name: "鞋", price: 25.4, time: new Date("2018-11-22") },
{ id: 103, name: "头发", price: 19900, time: new Date("2020-12-12") },
],
obj: {
name: "",
price: 0,
},
};
},
watch: {
arr: {},
},
filters: {
//修改时间日期格式
getDate(getTime) {
return moment(getTime).format("YYYY-MM-DD/HH:mm:ss");
},
},
computed: {
sum() {
//reduce():对这个数组进行求和
return parseInt(this.list.reduce((sum, obj) => (sum += obj.price), 0));
},
average() {
return parseInt(this.sum / this.list.length);
},
},
methods: {
//新增数据
btnAdd() {
if (!this.obj.name || this.obj.price == 0) {
alert("请重新输入");
} else {
this.list.push({
id:
this.list.length > 0 ? this.list[this.list.length - 1].id + 1 : 100,
name: this.obj.name,
price: this.obj.price,
time: new Date(),
});
this.obj.name = this.obj.price = "";
}
},
//删除数据,根据id获取索引来进行删除
del(id) {
let index = this.list.findIndex((item) => item.id == id);
this.list.splice(index, 1);
},
},
};
</script>
<style>
.red {
color: red;
}
</style>
