Vue 指令demo - 码农教程

有如下成绩单数据
scores = [
{ name: 'Bob', math: 97, chinese: 89, english: 67 },
{ name: 'Tom', math: 67, chinese: 52, english: 98 },
{ name: 'Jerry', math: 72, chinese: 87, english: 89 },
{ name: 'Ben', math: 92, chinese: 87, english: 59 },
{ name: 'Chan', math: 47, chinese: 85, english: 92 },]
1、用table表格标签渲染以上数据，表格第一列是学生总分排名，最后一列是学生总分；

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <table class="table table-hover" border="1"  align="center" cellspacing="1" cellpadding="10">
            <tr>
                <th>rand</th>
                <th>name</th>
                <th>math</th>
                <th>chinese</th>
                <th>english</th>
                <th>total</th>
            </tr>
            <tr v-for="(score,i) in scores">
                <td align="center">{{ i }}</td>
                <td v-for="v in score" align="center">{{ v }}</td>
            </tr>
        </table>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let scores = [
        { name: 'Bob', math: 97, chinese: 89, english: 67 },
        { name: 'Tom', math: 67, chinese: 52, english: 98 },
        { name: 'Jerry', math: 72, chinese: 87, english: 89 },
        { name: 'Ben', math: 92, chinese: 87, english: 59 },
        { name: 'Chan', math: 47, chinese: 85, english: 92 },
    ];
    for(score of scores){
        score.total = score.math + score.chinese + score.english
    }
    console.log(scores);
    for (let i=0; i<scores.length-1; i++){
        for (let j=0; j<scores.length-1-i; j++){
            if (scores[j].total < scores[j+1].total){
                let temp = scores[j];
                scores[j] = scores[j+1];
                scores[j+1] = temp;
            }
        }
    }
    console.log(scores);
    new Vue({
        el:'#app',
        data:{
            scores,
        }
    })
</script>
</html>

2、还是采用上方相同的数据，采用相同的渲染规则，只渲染所有科目都及格了的学生。

给1中的<tr v-for="(score,i) in scores"> 加上v-if="score.math>=60 && score.chinese>=60 && score.english>=60"
如下所示：
<tr v-for="(score,i) in scores" v-if="score.math>=60 && score.chinese>=60 && score.english>=60">

3、还是采用上方相同的数据，添加筛选规则：
1）有三个按钮：语文、数学、外语，点击谁谁高亮，且当前筛选规则采用哪门学科

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div align="center">
            <button @click="field='math'" :class="{active: field === 'math'}">math</button>
            <button @click="field='chinese'" :class="{active: field === 'chinese'}">chniese</button>
            <button @click="field='english'" :class="{active: field === 'english'}">english</button>
        </div>

        <br>
        <table class="table table-hover" border="1"  align="center" cellspacing="1" cellpadding="10">
            <tr>
                <th>rand</th>
                <th>name</th>
                <th >math</th>
                <th >chinese</th>
                <th >english</th>
                <th>total</th>
            </tr>
            <tr v-for="(score,i) in scores" v-if="score.math>=60 && score.chinese>=60 && score.english>=60">
                <td align="center">{{ i+1 }}</td>
                <td v-for="v in score" align="center" >{{ v }}</td>
            </tr>           
        </table>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let scores = [
        { name: 'Bob', math: 97, chinese: 89, english: 67 },
        { name: 'Tom', math: 67, chinese: 52, english: 98 },
        { name: 'Jerry', math: 72, chinese: 87, english: 89 },
        { name: 'Ben', math: 92, chinese: 87, english: 59 },
        { name: 'Chan', math: 47, chinese: 85, english: 92 },
    ];
    for(score of scores){
        score.total = score.math + score.chinese + score.english
    }
    console.log(scores);
    for (let i=0; i<scores.length-1; i++){
        for (let j=0; j<scores.length-1-i; j++){
            if (scores[j].total < scores[j+1].total){
                let temp = scores[j];
                scores[j] = scores[j+1];
                scores[j+1] = temp;
            }
        }
    }
    console.log(scores);
    new Vue({
        el:'#app',
        data:{
            scores,
            field:'',
        }
    })
</script>
</html>

2）两个输入框，【】~【】，前面天最小分数，后面填最大分数，全部设置完毕后，表格的数据会被更新只渲染满足所有条件的结果
举例：点击语文，输入【86】~【87】，那就只会渲染Jerry和Ben两条数据

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            background: pink;
        }
    </style>
</head>
<body>
    <div id="app">
        <div align="center">
            <button @click="field='math'" :class="{active: field === 'math'}">math</button>
            <button @click="field='chinese'" :class="{active: field === 'chinese'}">chniese</button>
            <button @click="field='english'" :class="{active: field === 'english'}">english</button>
            <br>
            <input type="number" min="0" max="100" v-model="min">
            ~
            <input type="number" min="0" max="100" v-model="max">
        </div>

        <br>
        <table class="table table-hover" border="1"  align="center" cellspacing="1" cellpadding="10">
            <tr>
                <th>rand</th>
                <th>name</th>
                <th >math</th>
                <th >chinese</th>
                <th >english</th>
                <th>total</th>
            </tr>
            <tbody v-if="field==='math'">
                <tr v-for="(score,i) in scores" v-if="score.math>=min && score.math<=max || (!min||!max)">
                    <td align="center">{{ i+1 }}</td>
                    <td v-for="v in score" align="center" >{{ v }}</td>
                </tr>
            </tbody>

            <tbody v-else-if="field==='chinese'">
                <tr v-for="(score,i) in scores" v-if="score.chinese>=min && score.chinese<=max || (!min||!max)">
                    <td align="center">{{ i+1 }}</td>
                    <td v-for="v in score" align="center" >{{ v }}</td>
                </tr>
            </tbody>

            <tbody v-else-if="field==='english'">
                <tr v-for="(score,i) in scores" v-if="score.english>=min && score.english<=max || (!min||!max)">
                    <td align="center">{{ i+1 }}</td>
                    <td v-for="v in score" align="center" >{{ v }}</td>
                </tr>
            </tbody>

            <tbody v-else>
                <tr v-for="(score,i) in scores" >
                    <td align="center">{{ i+1 }}</td>
                    <td v-for="v in score" align="center" >{{ v }}</td>
                </tr>
            </tbody>
        </table>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    let scores = [
        { name: 'Bob', math: 97, chinese: 89, english: 67 },
        { name: 'Tom', math: 67, chinese: 52, english: 98 },
        { name: 'Jerry', math: 72, chinese: 87, english: 89 },
        { name: 'Ben', math: 92, chinese: 87, english: 59 },
        { name: 'Chan', math: 47, chinese: 85, english: 92 },
    ];
    for(score of scores){
        score.total = score.math + score.chinese + score.english
    }
    console.log(scores);
    for (let i=0; i<scores.length-1; i++){
        for (let j=0; j<scores.length-1-i; j++){
            if (scores[j].total < scores[j+1].total){
                let temp = scores[j];
                scores[j] = scores[j+1];
                scores[j+1] = temp;
            }
        }
    }
    console.log(scores);
    new Vue({
        el:'#app',
        data:{
            scores,
            field:'',
            min:'',
            max:'',
        }
    })
</script>
</html>

原文地址：https://www.cnblogs.com/allenchen168/p/12061704.html