Vue的第四天学习

SXY0426

已于 2022-05-27 18:39:42 修改

阅读量91

点赞数 1

文章标签：学习 vue.js 前端

于 2022-05-24 20:45:30 首次发布

本文链接：https://blog.csdn.net/qq_44383759/article/details/124953581

版权

1、v-on的基本使用与函数传参、文本框切换Demo

文本框切换

2、v-on的事件修饰符

3.v-on的按键修饰符（键盘事件）

4.如何当input框失去焦点时，点击enter键登录成功

created()方法里面实现对整个document(dom)的传统注册方式，给一个判断，如果你按了enter键，那e.code是“Enter”或者“enter,然后在该判断条件下，再次调用methods里面的submit方法,从而实现登录

5.v-if和v-if的一个demo

v-if="",引号里面的内容是布尔值，v-if,v-else-if,v-else相当于if判断

”6、利用watch写一个温度变化的Demo

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        * {

            padding: 0px;

            margin: 0px;

        }

    </style>

</head>



<body>

    <div id="app">

        <!-- <p>{{infor}}{{y}}</p> -->

        <!-- <button v-on:click="changeWeather()">切换天气</button> -->

        <!-- <button v-on:click="window.alert('......')">点击出现弹窗</button> -->

        <!-- <button v-on:click="isHot=!isHot">切换天气</button> -->

        <p>{{infor}}</p>

        <p>{{content}}</p>

        <button v-on:click="changeWeather">切换天气</button>

    </div>

    <script src="vue.js"></script>

    <script>

        Vue.config.productionTip = false;

        const vm = new Vue({

            data() {

                return {

                    isHot: 24,

                    y: 1,

                    window,

                    content: ""

                }

            },

            methods: {

                changeWeather() {

                    this.isHot = this.isHot + 6;

                }

                // this.y++;

                // this.isHot = !this.isHot

                // },

                // changeWeatherT(){

                //     this.isHot++;

                // }

            },

            computed: {

                infor() {

                    // return "今天天气" + (this.isHot ? "炎热" : "凉爽");

                    return "今天天气" + this.isHot + "度";

                }

            },

            watch: {

                // isHot:{

                //     handler(n,o){

                //         console.log(n,o);

                //         if((n-o)>=6){

                //             this.content="温度已经达到30度及30度以上,预防中暑"

                //         }

                //         else{

                //             this.content="温度适宜,天气凉爽,适合外出玩"

                //         }

                //     },

                //     immediate:true,

                //     deep:true

                // }

                infor:{

                    handler(n,o){

                        console.log(n,o);

                    },

                    immediate:true,

                    deep:true

                }

            }

        })

        vm.$mount("#app");

        vm.$watch("isHot", {

            handler(n, o) {

                console.log(n, o);

                if ((n - o) >= 6) {

                    this.content = "温度已经达到30度及30度以上,预防中暑"

                } else {

                    this.content = "温度适宜,天气凉爽,适合外出玩"

                }

            },

            immediate: true,

            deep: true

        })

    </script>

</body>



</html>

8、v-show与v-if的区别

v-show几乎不影响性能，可以暂时的卸载dom元素，比如隐藏dom

9、购物车Demo

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>



<body>

    <div id="vm">

        <table>

            <thead>

                <tr>

                    <th>&nbsp;</th>

                    <th>书籍名称</th>

                    <th>出版日期</th>

                    <th>价格</th>

                    <th>购买数量</th>

                    <th>操作</th>

                </tr>

            </thead>

            <tbody>

                <tr v-for="(item,index) in arr" ::key="index">

                    <td>

                        {{index}}

                    </td>

                    <td>

                        {{item.books}}

                    </td>

                    <td>

                        {{item.dates}}

                    </td>

                    <td>

                        {{item.price}}

                    </td>

                    <td>

                        <button v-on:click=" reduces(index)" v-bind:disabled="istrue(index)">-</button>

                        {{item.count}}

                        <button v-on:click="add(index)">+</button>

                    </td>

                    <td><button @click="removes(index)">移除</button></td>

                </tr>

            </tbody>

        </table>

        <h2 v-if="allPrice>0">{{allPrice}}</h2>

        <h2 v-else>购物车为空</h2>




    </div>

    <script src="vue.js"></script>

    <script>

        const vm = new Vue({

            data() {

                return {

                    arr: [{

                            books: "《算法导论》",

                            dates: "2006-9",

                            price: 85.00,

                            count: 1

                        },

                        {

                            books: "《UNIX编程艺术》",

                            dates: "2006-2",

                            price: 59.00,

                            count: 1

                        },

                        {

                            books: "《编程大全》",

                            dates: "2008-10",

                            price: 39.00,

                            count: 1

                        },

                        {

                            books: "《代码大全》",

                            dates: "2006-3",

                            price: 128.00,

                            count: 1

                        }

                    ]

                }

            },

            computed:{

                allPrice(){

                    let prices=0;

                    this.arr.map(function(item){

                       prices+=item.price*item.count

                    })

                    return prices;

                },



            },

            methods: {

                add(index){

                    this.arr[index].count++;

                },

                reduces(index){

                    this.arr[index].count--;

                },

                removes(index){

                    this.arr.splice(index,1)

                },

                istrue(index){

                   return this.arr[index].count<=1

                }

            },




        })

        vm.$mount("#vm")

    </script>

</body>



</html>