一、案例小结

最新推荐文章于 2024-09-26 16:13:07 发布

**猿来是你**

最新推荐文章于 2024-09-26 16:13:07 发布

阅读量5k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_36349372/article/details/105258158

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

案例一：

在这里插入图片描述

<div id="app">
<h3>请输入你想要做的事</h3>
    <input type="text" v-model="mes" @keyup.enter="fn">
    <ul>
        <li v-for="(item,index) in arr">//使用v-for循环迭代数组中的数据
            {{index}}-----{{item}}//将数据输出
            <button @click="remove(index)">删除</button>//获取点击删除的按钮
        </li>
    </ul>
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            mes:'',//用来接收表单的参数
            arr:[]//将接收的参数存放到数组中
        },
        methods:{
            fn(){
                this.arr.push(this.mes);///将接收的参数存放到数组中
                this.mes='';//然后将表单清空
            },
            remove(index){
                this.arr.splice(index,1);//删除对应索引的数据
            }
        }

    })
</script>

案例二：

在这里插入图片描述

<div id="app">
    <ul>
        <li v-for="(user,index) in users">
            {{index}}-----{{user.name}}------{{user.age}}
            <button @click="remove(index)">删除</button>/触发删除按钮
            <button @click="change(index,{'name':'张三','age':28})">修改</button>//触发修改按钮
        </li>
    </ul>
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            users: [
                {name: 'Danny', age:25},
                {name: 'Jack', age:27},
                {name: 'Mack', age:26},
                {name: 'Mary', age:29}
            ]
        },
        methods:{
            remove(index){
                this.users.splice(index,1)
            },
            change(index,newobj){
            //第一种方法，修改数组中视图显示的数据
                // this.users[index].name='张三'
                // this.users[index].age=28
                //第二中方法，修改数组中视图显示的数据
                this.users.splice(index,1,newobj)
            }
        }

    })
</script>

案例三：

在这里插入图片描述

<div id="app">
    <input type="text" v-model="msg" >
    <ul>
        <li v-for="(user,index) in filterUsers">
            {{index}}-----{{user.name}}--------{{user.age}}
        </li>
        <button @click="sortage(1)">年龄升序</button>//触发排序按钮
        <button @click="sortage(0)">年龄降序</button>
    </ul>
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            msg:'',
            users: [
                {name: 'Danny', age:25},
                {name: 'Jack', age:27},
                {name: 'Mack', age:26},
                {name: 'Mary', age:29}
            ]
        },
        methods:{
            sortage(value){
                this.users.sort((a,b)=>{
                    if (value){
                        return a.age-b.age;//年龄升序
                    }else{
                        return b.age-a.age //年龄降序
                    }
                })
            }
        },
        computed: {
            filterUsers() {
                return this.users.filter((user) => {//将数组中的数据筛选
                    return user.name.includes(this.msg);
                })
            }
        }

    })
</script>

案例四:

在这里插入图片描述

 <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">//引入bootstrarp的样式
    <style>
        *{
            margin:0;
            padding:0;
        }
        #app{
            width:1200px;
            margin:auto;
        }
    </style>
    //css页面布局
</head>
<body>
<div id="app">
    <table class="table table-hover">
        <caption class="h1 text-center text-success">京东购物车</caption>
        <tr>
            <td>
                <label >全选</label>
                <input type="checkbox" v-model="checkAll" @change="selectall">//绑定点击事件@change="selectall"，用来改变选择按钮的显示情况
            </td>
            <td>商品</td>
            <td>商品描述</td>
            <td>单价</td>
            <td>数量</td>
            <td>小计</td>
            <td>操作</td>
        </tr>

        <tr v-for="(product,index) in products">//for循环，来显示数组中的值

            <td>
                <input type="checkbox" v-model="product.isSelected" @change="selectsingal">//对每一调对象设置一个选择按钮的点击事件
            </td>
            <td>
                <img :src="product.imgUrl" alt="商品图片">
            </td>
            <td>{{product.bookName}}</td>
            <td>{{product.price}}</td>
            <td>
                <input type="number" v-model="product.amount">
            </td>
            <td>{{product.price * product.amount|fixed(2)}}</td>//filed),是用来对数据进行过滤
            <td>
                <div class="btn btn-danger" @click="remove">删除</div>
            </td>
        </tr>
        <tr>
            <td>总计：{{summery|fixed(2)}}</td>//设置一个计算属性，存放总价
        </tr>
    </table>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>
    let vm = new Vue({
        el:'#app',
        filters:{                       //   filters在Vue中存放过滤的一个容器
            fixed(value,num){  //定义一个过滤器fixed(value)
                return '￥'+value.toFixed(num)+'元   //给数据进行过滤修饰
            }
        },
        data:{
            checkAll:false,//设置一个总的按钮属性，默认为false
            products:[
                {
                    isSelected:false,//设置每一个紫的按钮属性，默认为false
                    imgUrl:"https://img10.360buyimg.com/cms/s80x80_jfs/t6094/107/710811867/382815/4d54717/592bf165N755a88f0.jpg",
                    bookName:'深入浅出Node.js',
                    price:	54.50,
                    amount:1,
                },
                {
                    isSelected:false,
                    imgUrl:"https://img10.360buyimg.com/cms/s80x80_jfs/t9508/97/2285719018/62961/99c5b1b7/59f299b4Nc9e78adb.jpg",
                    bookName:'Vue.js实战',
                    price:	62.4,
                    amount:1,
                }
            ]
        },
        methods:{
            selectall(){    //点击全选的按钮属性的函数
                    this.products.forEach(product=>{     //一个回调函数，遍历数组中的每一个值，将数组中的每一条数据的子选择都设置成总的选择按钮样式
                        product.isSelected=this.checkAll;
                    })
            },
            selectsingal(){    //点击子选择的按钮属性的函数
                this.products.forEach(product=>{
                  //如果子数据中的每一条数据的点击按钮都为true的时候则主的按钮属性也变成为true
                    this.checkAll=this.products.every(product=>product.isSelected)
                })
            },
            remove(index){
                this.products.splice(index,1)
            }

        },
        computed:{
            summery(){
               //.用来计算总价的属性，0表示pre的值，然后依次循环遍历，计算总价
                return this.products.reduce((pre,next)=>{
                    return pre+next.price*next.amount
                },0)
            }
        }
    })

</script>

案例四

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet"
          href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
          crossorigin="anonymous">//引入bootstrap样式
    <style>
        *{
            margin:0;
            padding:0;
        }
        #app{
            width:1024px;
            margin:auto;
        }
        .on{
            color:#ccc;
            text-decoration: line-through;
        }//定义一个样式，显示点击后的样式
        .heaven{
            display: inline;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="panel panel-success">
        <div class="panel-heading">
            <h3>今天还有{{num}}件事未做</h3>
            <input type="text" v-model="title" @keyup.enter="add">//一个文本框，绑定一个title，和一个添加按钮事件
        </div>
        <div class="panel-body">
            <ul class="list-group">
                <li class="list-group-item" @dblclick='update(index)' v-for="(todo,index) in filterTodos">//对数组过滤后的数组进行for循环遍历
                    <div v-show="!todo.isDouble" class="heaven">//判断是否双击文本框
                        <input type="checkbox" v-model="todo.isSelected">//判断点击按钮是否被选中
                        <label :class="{on:todo.isSelected}">{{todo.thing}}</label>
                    </div>
                    <input type="text"
                           v-show="todo.isDouble"
                           v-model="todo.thing"
                           @blur="blur(index)"//文本框的焦点事件消失
                           @keyup.13="blur(index)"
                           v-focus>
                    <button @click='remove(index)' class="btn btn-xs pull-right btn-danger glyphicon glyphicon-remove-circle"></button>//删除按钮设置
                </li>
            </ul>
        </div>
        <div class="panel-footer">
            <ul class="nav nav-pills">
                <li role="presentation" :class="{active:hash==='#all'}"><a href="#all">所有任务</a></li>//通过hash值来判断点击的哪一个按钮，然后输出相应的值
                <li role="presentation" :class="{active:hash==='#finish'}"><a href="#finish">已完成</a></li>
                <li role="presentation" :class="{active:hash==='#unfinish'}"><a href="#unfinish">未完成</a></li>
            </ul>
        </div>
    </div>
</div>
<!--配置vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            title:'',           //储存文本框中的数据
            hash:'#all',            //储存hash值
            todos:[
                {
                    isSelected:false,
                    thing:'吃饭',
                    isDouble:false,
                },
                {
                    isSelected:false,
                    thing:'散步',
                    isDouble:false,
                },
            ]
        },
        watch:{//监听器，用于保存数据
            todos:{
                handler(){  //在本地保存了数据
                    localStorage.setItem('todos',JSON.stringify(this.todos))//将数组中的数据转换成json格式，本地存储
                },
                deep:true,          //深度监视todos
            }
        },
        methods:{
            add(){
                this.todos.push({
                    isSelected:false,
                    thing:this.title,
                    isDouble:false
                });
                this.title = ''
            },
            remove(index){
                this.todos.splice(index,1)
            },
            update(index){
                this.todos[index].isDouble = !this.todos[index].isDouble//更新数组内容
            },
            blur(index){
                this.todos[index].isDouble=false;
            }
        },
        computed:{
            num(){
                return this.todos.filter(todo=>!todo.isSelected).length
            },
            filterTodos(){
                if(this.hash==='#unfinish')return this.todos.filter(todo=>!todo.isSelected)
                if(this.hash==='#finish') return this.todos.filter(todo=>todo.isSelected)
                return this.todos
            }
        },
        directives:{    //该选项存放的是自定义指令
            focus(el){
                //让元素获取焦点
                el.focus()
                //el.style.backgroundColor='#'+Math.random().toString(16).slice(2,8)
            }
        },
        created(){
            this.todos = JSON.parse(localStorage.getItem('todos'))||[]
            //监听hash值的变化
            window.addEventListener('hashchange',()=>{
                this.hash = window.location.hash;
            })
        }

    })
</script>