vue实战学习教程1-监听、样式绑定、筛选过滤排序

这篇博客总结了Vue.js中的核心特性，包括计算属性、监听、样式绑定、数据过滤与排序。示例代码展示了如何创建动态列表，实现删除、更新学生信息的功能，以及对数据进行升序和降序排列。同时，还涵盖了输入框双向绑定、事件处理及动态改变元素样式的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中计算、监听、样式绑定、style、筛选、过滤、排序等，归纳总结了一下。

<head>
    <style>
        .bgblue{ background-color:blue;}
        .bgyellow{ background-color:yellow;}
    </style>
</head>
<body>
<div id="myvue">
    <ul>
        <li v-for='(s,index) in students'>{{index}} - {{s.name}} - {{s.age}} 
            <button @click="deleteStudensIndex(index)">删除</button>
            <button @click="updetaStudensIndex(index,{name:'yl',age:'32'})">更新</button>
        </li>
    </ul>
    <button @click='newOrder(1)'>降序</button><button @click='newOrder(0)'>升序</button>
    <ul>
        <li v-for='(s,index) in QueryStudentsByName'>{{index}} - {{s.name}} - {{s.age}} 
            <button @click="deleteStudensIndex(index)">删除</button>
            <button @click="updetaStudensIndex(index,{name:'yl',age:'32'})">更新</button>
        </li>
    </ul>
    用户名:<input type="text" v-model="username">
    年龄：<input type="text" v-model="age">
    <button v-on:click="info(1)">显示</button>
    <input v-model="myclick">
    <a v-bind:href="src">百度</a>
    <h2>显示：{{username}},{{age}}</h2>
    <h1 :class="style1">这里有一行文字</h1>
    <button @click="chargebg">变色</button>
</div>
<script src="js/vue.js"></script>
<script>
var myvue=new Vue({
    el:"#myvue",
    data:{
        chargeOrder:'0',//排序 0为升序 1为降序
        username:"张三",
        age:21,
        src:"https://www.baidu.com",
        style1:"bgblue",
        style2:"bgyellow",
        students:[
            {name:'zs',age:'20'},
            {name:'ls',age:'21'},
            {name:'ww',age:'22'},
            {name:'ll',age:'23'}
        ],
        queryName:'s' //筛选
    },
    methods:{   //方法写到这里
        info(value){
           alert( value + this.username + "," + this.age )
        },
        chargebg(){
            this.style1="bgyellow"
        },
        deleteStudensIndex(index){  //删除数组
            this.students.splice(index,1)
        },
        updetaStudensIndex(index,stu){  //更新替换数组
            this.students.splice(index,1,stu)
        },
        newOrder(chargeOrder){
            this.chargeOrder=chargeOrder;//获取排序条件，不能随便填
        }
    },
    computed:{//计算写到这里
        myclick(){
            return "hello" + this.username
        },
        QueryStudentsByName(){
            var NewStudents=[]; // 存放筛选后的新学生
            var {students,queryName,chargeOrder}=this; //取到筛选数组、条件、排序方式
            NewStudents=students.filter(stu=> stu.name.indexOf(queryName)>-1);  //按照刷选条件 查询出新数组
            NewStudents.sort(function(s1,s2){  //数组排序，套路做法
                if(chargeOrder==0){
                   return s1.age - s2.age
                }else{
                    return s2.age-s1.age
                }
            })
            return NewStudents;
        }
        

    },
    //数据监听 v->m  html->data
    // watch:{  //数据监听方法一
    //     username:function(value){
    //         this.age = value + "1"
    //     }
    // }
});
//数据监听方法二
myvue.$watch("username",function(value){
    this.age=value+"1"
})
</script>
</body>