Vue練習--表データフィルタのソート
17622 ワード
Vue練習–表データフィルタのソート
目次コードケース v-model v-on v-for 計算属性 sort()メソッド コードケース
v-model双方向データバインディングは、一般にフォーム要素に用いる.
v-onは、DOMイベントの傍受を指示し、トリガ時にいくつかのJavaScriptコードを実行する.@、すなわちv-on:=@ と略記する
v-forは、配列のセットのオプションリストに従ってレンダリングされる.
計算プロパティ計算属性の一部のデータの変化は、ビジネスロジック計算に伴うものであり、dataの下にマウントされたデータでは実現できない. 注意事項computedの中にいくつかの業務論理コードを置くことができて、きっとreturn を覚えています
sort()メソッドは、配列の要素をソートするために使用されます.
2つの使用方法呼び出し時にパラメータを使用せずに文字符号化の順序で並べ替えます. 他の基準に従ってソートするには、2つの値を比較する比較関数を提供し、2つの値の相対的な順序を説明するための数値 を返す必要がある.
目次
<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
<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
v-for
"example-1">
- for="item in items">
{{ item.message }}
var example1 = new Vue({
el: '#example-1',
data: {
items: [
{ message: 'Foo' },
{ message: 'Bar' }
]
}
})計算プロパティ
sort()メソッド
2つの使用方法