Vue--基础2

1、filter 过滤器

<div id="app">
        <h1 v-bind:id='price | fmPrice'>111</h1>
        {{price | fmPrice}}
        <ul>
            <li v-for='item in list'>{{item.id}}-
                {{item.name}}--{{item.gender}}  <!-- 区别 -->
            </li>
        </ul>
        <ul>
            <li v-for='item in list'>{{item.id}}-{{item.name}}
                --{{item.gender | fmGender}}  <!-- 区别 | -->
            </li>
        </ul>
        <hr>
        <h1>
            总人数为{{fullcount}}人， <br>
            男生为{{malecount}}人，<br>
            女生为{{femalecount}}人
        </h1>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./filter.js"></script> <!-- 外部引入过滤器 -->

    <script>
        // 全局过滤器
        Vue.filter('fmgender',function(gender){
            return ['男','女'][gender] || '未知'    /* 区别 || */
        })

        new Vue({
            el: '#app',
         // 局部过滤器
            // filters:{    /* 区别 全局是filter 局部是filters */
            //     fmgender:function(gender){
            //         return ['男','女'][gender] || '未知'     /* 区别 || */
            //     }
            // },
            computed:{
                fullcount(){
                    return this.list.length
                },
                malecount(){
                    return this.list.filter(r=>r.gender==0).length
                },
                femalecount(){
                    return this.fullcount - this.malecount
                }
            },
            data() {
                return {
                    price: 100,
                    list: [
                        {
                            id: '1',
                            name: 'simba',
                            gender: '1'
                        },
                        {
                            id: '2',
                            name: 'Ace',
                            gender: '0'
                        },
                        {
                            id: '3',
                            name: 'Roger',
                            gender: '1'
                        },
                    ]
                }
            },
        })


    </script>

2、计算属性

<div id="app">
        <input type="text" v-model='firstname'>+
        <input type="text" v-model='lastname'>
        ={{fullname}}
        
        <hr>
        {{reversedFullName}}
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
        var app = new Vue({
            el:'#app',
            data(){
                return {
                    firstname:'张',
                    lastname:'三',
                }
            },
            computed:{ // 计算属性的getter
                fullname(){
                    // this指向app的实例
                    return this.firstname + this.lastname
                },
                reversedFullName(){
                    return this.fullname.split('').reverse().join('')
                }
                
            },
        })
    </script>

demo

• 题目：根据数据生成一个列表，显示标题、类型、选项、分值
  得到每个题型的数量及总分、分数占比 如 单选题 2题 6分 45%
  0是单选 1多选 2判断

<div id="app">
        <ul>
            <li v-for='(item,i) in list'>
                {{i+1}}.【{{item.type | fmtype}}】{{item.title}} (分值：{{item.score}})
                <ul>
                    <li style="list-style: none;" v-for='(o,j) in item.options'>
                        <div style="display: inline;">
                            <span>{{j | fmoptions}}</span>
                        </div>
                        <input v-if='item.type==0' type="radio">
                        <input v-if='item.type==1' type="checkbox">
                        <input v-if='item.type==2' type="radio">
                        {{o}}
                    </li>
                </ul>
            </li>
        </ul>
        <hr>
        <h5>
            单选题{{dan.count}}题，总分为{{dan.score}} ，分数占比为{{dan.percent | fmpercent}} <br>
            多选题{{duo.count}}题，总分为{{duo.score}} ，分数占比为{{duo.percent | fmpercent}}<br>
            判断题{{pan.count}}题，总分为{{pan.score}} ，分数占比为{{pan.percent | fmpercent}}
        </h5>
    </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        Vue.filter('fmtype', function (val) {
            return ['单选', '多选', '判断'][val] || '未知'
        })

        new Vue({
            el: '#app',
            computed: {
                totalScore() {
                    return this.list.reduce((total, curr) => total += curr.score, 0)
                },
                dan() {
                    return this.getInfo(0)
                },
                duo() {
                    return this.getInfo(1)
                },
                pan() {
                    return this.getInfo(2)
                },

            },
            filters: {
                fmoptions: function (val) {
                    return 'ABCD'[val]
                },
                fmpercent: function (val) {
                    return (val * 100).toFixed(2) + '%'
                }
            },
            data() {
                return {
                    list: [
                        {
                            "id": 1001,
                            "title": "1+1等于几？",
                            "options": [
                                "2",
                                "4",
                                "5",
                                "0"
                            ],
                            "score": 2,
                            "type": 0
                        },
                        {
                            "id": 1002,
                            "title": "以下哪些数是偶数？",
                            "options": [
                                "2",
                                "3",
                                "5",
                                "0"
                            ],
                            "score": 3,
                            "type": 1
                        },
                        {
                            "id": 1003,
                            "title": "地球是太阳系中最大的星体？",
                            "options": [
                                "正确",
                                "错误"
                            ],
                            "score": 3,
                            "type": 2
                        },
                        {
                            "id": 1004,
                            "title": "汉朝时出现青花瓷？",
                            "options": [
                                "正确",
                                "错误"
                            ],
                            "score": 3,
                            "type": 2
                        },
                        {
                            "id": 1005,
                            "title": "2+1等于几？",
                            "options": [
                                "2",
                                "4",
                                "3",
                                "6"
                            ],
                            "score": 2,
                            "type": 0
                        }
                    ],

                }
            },
            methods: {
                    getInfo(type) {
                        let res = this.list.filter(r => r.type === type)
                        // let score = 0
                        // res.forEach(r => {
                        //     score += r.score
                        // })
                        let score = res.reduce((total, curr) => total += curr.score, 0)

                        return {
                            count: res.length,
                            score,
                            percent: score / this.totalScore
                        }
                    }
                },
            })
    </script>