現在上節中安裝的專案的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>

最終的效果就是