vuejs學習系列-第一個小demo
阿新 • • 發佈:2019-02-01
現在上節中安裝的專案的src目錄中建立pages檔案用來裝demo原始碼
我們現在的目錄結構是這樣的
首先在pages裡新建demo01資料夾,順便在demo01下,建立index.vue檔案,然後在router裡新增
{
path: '/demo01',
name: 'DEMO01',
component: demo01
}
index.vue裡將會放置我們所有的demo程式碼
首先,寫html結構作為template
<template>
<div id="demo01">
<div class="table" >
<ul>
<li v-for="item in dataList"><span class="text">{{item.name}}</span><span class="slide"><div class="progrss"><i class="progrss-activ" :style="{width: item.score + '%'}"></i></div><span class="num">{{item.score}}</span ></span></li>
</ul>
<div class="ragle">
<div class="input-item" v-for="(item, index) in dataList">
<label :for="'inpt'+(index+1)">
{{item.name}}
</label>
<input type="range" :data-index="index" v-on:input="rangeChange" :id="'inpt'+(index+1)" :value="item.score" max="100" min="0" step="1"/>
<span>{{item.score}}</span>
</div>
</div>
</div>
</div>
</template>
結構很簡單,一個是進度條,一個是拉動條,稍微加點樣式
<style>
.table{
height: 400px;
width: 800px;
margin: 100px auto;
padding: 50px;
background: #f5f5f5;
}
.table ul{
width: 600px;
margin: 0 auto;
}
.table ul li{
height: 30px;
line-height: 30px;
margin-top: 30px;
overflow: hidden;
position: relative;
}
.text, .slide{
display: inline-block;
position: absolute;
}
.text{
left: 0;
width: 10%;
text-align: right;
}
.slide{
width: 90%;
left: 12%;
}
.progrss{
width: 80%;
background: #dedede;
height: 30px;
display: inline-block;
position: relative;
border-radius: 8px;
}
.progrss-activ{
height: 100%;
background: #00A2E8;
display: block;
border-radius: 8px;
}
.num{
display: inline-block;
height: 30px;
line-height: 30px;
position: absolute;
right: 0;
top:0;
width: 40px;
}
.ragle{
margin: 50px 100px;
}
.input-item{
height: 40px;
}
.input-item input{
width: 80%;
outline: none
}
.input-item .span{
}
</style>
接下來就是寫js了,在index.vue中新增script
<script>
export default{
data () {
return {
//首先定義資料
dataList:[
{
"name": '語文',
"score": 87
},{
name: '數學',
score: 65
},{
name: '英語',
score: 96
},{
name: '體育',
score: 50
}
]
}
},
created: function () {
// console.log(this)
// this.dataList = this.sortArray(this.dataList, 'score')
},
methods: {
rangeChange: function (e) { //響應js時間
var val = e.target.value;
var index = e.target.attributes['data-index'].value
console.log(val, index)
this.dataList[index].score = val
// this.dataList = this.sortArray(this.dataList, 'score')
},
sortArray: function (value, key) { //用來資料排序
return value.sort(function (a, c) {
return a[key] < c[key];
})
}
}
}
</script>
最終的效果就是