Vue v-for

2021-08-17 18:31:24 阅读：146 来源： 互联网

标签：index Vue return name orderType age -------------------------

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="p in personArr">{{p}}</li>
        </ul>
        <p>-------------------------</p>
        <ul>
            <li v-for="(p,index) in personArr">{{index}}--{{p}}</li>
        </ul>
        <p>-------------------------</p>
        <ul>
            <li v-for="(p,index) in persons">{{index}}--{{p.name}}-{{p.age}}</li>
        </ul>
        <p>-------------------------</p>
        <table border="1">
            <tr v-for="(person,index) in persons">
                <td>{{index}}</td>
                <td v-for="(item,key) in person">{{key}}:{{item}}</td>
            </tr>
        </table>
        <p>-------------------------</p>
        <table border="1">
            <tr v-for="person in persons">
                <td v-for="(item,key,index) in person">{{index}}--{{key}}:{{item}}</td>
            </tr>
        </table>
        <p>-------------------------</p>
        <label>name<input type="text" placeholder="name" v-model="searchStr"></label>
        <button @click="setOrderType('age asc')">age asc</button>
        <button @click="setOrderType('age desc')">age desc</button>
        <button @click="setOrderType('default')">default</button>
        <table border="1">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(person,index) in filterPersons">
                <td>{{index+1}}</td>
                <td>{{person.name}}</td>
                <td>{{person.age}}</td>
            </tr>
        </table>
    </div>
    <script src="js/vue.3.2.2.js"></script>
    <script>
        // 1、创建Vue的实例对象
        const app = Vue.createApp({
            data(){//定义数据
                return {
                    msg:'你好！',
                    searchStr: '',
                    orderType: 'default',
                    personArr:['张三','李四','王五'],
                    persons:[
                        {name:'张三',age:20,friends:['李四','王五']},
                        {name:'李四',age:24,friends:['张三','王五']},
                        {name:'王五',age:28,friends:['李四','张三']}
                    ]
                }
            },
            computed:{
                filterPersons(){
                    const {persons,searchStr,orderType} = this;
                    let arr = [...persons];
                    if(searchStr.trim()){
                        arr=persons.filter((p)=>{
                            return p.name.indexOf(searchStr) !== -1;
                        });
                    }
                    if(orderType){
                        arr.sort((p1,p2)=>{
                            if(orderType==='age asc'){
                                return p1.age-p2.age;
                            }else if(orderType==='age desc'){
                                return p2.age-p1.age;
                            }
                        })
                    }
                    return arr;
                }
            },
            methods:{
                setOrderType(orderType){
                    this.orderType=orderType;
                }
            }
        }).mount('#app');
    </script>
</body>
</html>

标签：index,Vue,return,name,orderType,age,-------------------------
来源： https://www.cnblogs.com/mingforyou/p/15153619.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue v-for