Vue练习–表格数据筛选排序
目录
- 代码案例
- v-model
- v-on
- v-for
- 计算属性
- sort()方法
代码案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue练习</title>
<style type="text/css">
*{
padding: 0;
margin:0;
}
.box{
text-align: center;
}
.box>span{
color: red;
font-size: 18px;
}
.table-top{
margin-top: 20px;
text-align: center;
margin-bottom: 40px;
}
.table-content{
margin:0 auto;
}
.table-content span{
background: #ff9900;
padding: 0 6px;
color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box" class="box">
<div class="table-top">
<input type="text" v-model="searchVal"><button>搜索</button>
</div>
<table border="1px" class="table-content">
<tr>
<th>商品名</th>
<th>单价
<span @click="orderFn('price', false)">↑</span>
<span @click="orderFn('price', true)">↓</span>
</th>
<th>销量
<span @click="orderFn('sales', false)">↑</span>
<span @click="orderFn('sales', true)">↓</span>
</th>
</tr>
<tr v-for='(item, key) in list'>
<td>{{item.name}}</td>
<td>{{item.price}}</td>
<td>{{item.sales}}万</td>
</tr>
</table>
<span>总价: {{ total }} 元</span>
</div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var myVue = new Vue({
el:'#box',
data:{
goodsList:[
{name:'三星-s8',price:5600,sales:1.2},
{name:'锤子-坚果pro',price:2500,sales:0.8},
{name:'iphone-6s',price:4300,sales:3.2},
{name:'iphone-7',price:5200,sales:2.6}
],
searchVal:'', //默认输入为空
letter:'', //默认不排序 // 排序字段
original:false, //默认从小到大排列
total:0 //默认总价
},
methods:{
orderFn(letter,original){
this.letter = letter; //排序字段
this.original = original; //排序方式
}
},
// 通过计算属性过滤数据
computed:{
list: function() {
var _this = this;
// 筛选
var arrGoods = [];
for (var i = 0;i < this.goodsList.length; i++)
{
// 如果匹配成功, 向空数组添加数据
if (this.goodsList[i].name.search(this.searchVal) != -1) {
arrGoods.push(this.goodsList[i]);
}
}
// 升序降序排列
// false:升序 true:降序
if (this.letter != '') {
arrGoods.sort(function(a,b){
if(_this.original){
return b[_this.letter] - a[_this.letter];
}else{
return a[_this.letter] - b[_this.letter];
}
});
}
_this.total = 0;
for (var i = 0;i < arrGoods.length; i++){
_this.total += arrGoods[i].price;
}
return arrGoods;
},
total: function(){
return this.total;
}
}
});
</script>
</html>
v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue练习</title>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
<p>原始文本信息：{{message}}</p>
<h3>文本框</h3>
<p>v-model:<input type="text" v-model="message"></p>
</div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script type="text/javascript">
var app=new Vue({
el:'#app',
data:{
message:'hello Vue!'
}
})
</script>
</html>- 双向数据绑定
一般用于表单元素.
v-on
- 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
简写成 @, 即 v-on: = @
v-for
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})- 根据一组数组的选项列表进行渲染。
计算属性
- 什么是计算属性
有些数据的变化是伴随着业务逻辑计算的，data 下挂载的数据无法实现这一点. - 注意事项
computed里面可以放置一些业务逻辑代码，一定记得return
sort()方法
- 用法
用于对数组的元素进行排序。
两种使用方法
- 调用时未使用参数
按照字符编码的顺序进行排序。 - 其他标准进行排序
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字