Vue.js 绑定样式 条件渲染 v-if判断 v-for 循环基本的列表 Vue写购物订单 Key的原理 列表的过滤 同时降序和升序 Vue.set 的使用

已于 2022-10-12 14:50:58 修改
阅读量220 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-10-12 14:35:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/red_HTML/article/details/127257716
版权

绑定样式   

<!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>
    <script src="../js/vue.js"></script>
    <style>
        .box {
            width: 500px;
            height: 200px;
            border: 1px solid red;
        }

        .Ren {
            font-size: 50px;
        }

        .Blue {
            background: red;
        }

        .Yellow {
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <div id="root">
        <div class="box" :class="moodArr">绑定样式数组形式</div>
        <div class="box" :class="moodObj">绑定样式布尔形式</div>
        <div class="box" :style="styleArr">绑定样式style对象形式</div>
        <div class="box" :style="styleObj">绑定样式style数组形式</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: "盒子",
                mood: "boxRen",
                moodArr: ['Ren', 'Blue', "Yellow"],
                moodObj: {
                    Ren: true,
                    Blue: false,
                    Yellow: true
                },
                styleArr: {
                    fontSize: "50px",
                    color: "blue"
                },
                styleObj: [
                    {
                        fontSize: "50px",
                        color: "blue"
                    },
                    {
                        background: "red"
                    }
                ]
            },
            methods: {

            },
        })
    </script>
</body>

</html>

案例点击对div随机颜色

<!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>
    <script src="../js/vue.js"></script>
    <style>
        .box {
            width: 500px;
            height: 200px;
            border: 1px solid red;
        }

        .boxRen {
            background: red;
        }

        .boxBlue {
            background: blue;
        }

        .boxYellow {
            background: yellow;
        }
    </style>
</head>

<body>
    <!-- 通过点击事件来修改一个盒子的背景颜色 -->
    <div id="root">
        <!-- 给div盒子通过v-bind添加mood属性 通过@click点击事件 -->
        <div class="box" :class="mood" @click="boxMath">{{name}}</div>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: "盒子",
                mood: "boxRen"
            },
            methods: {
                boxMath() {
                    // 获取到每个css样式的名字
                    const arr = ['boxRen', 'boxBlue', 'boxYellow']
                    // 随机出下标1-3
                    let index = Math.floor(Math.random() * 3)
                    // 给当前随机出来的样式
                    this.mood = arr[index]
                }
            },
        })
    </script>
</body>

</html>

条件渲染 v-if判断   

<!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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2 v-if="true">v-if 语句的判断</h2>
        <h2 v-show="true">v-show 语句的判断</h2>
        <span>n的值{{dianji}}</span>
        <button @click="dianji++">N+1</button>
        <h3 v-if="dianji === 1">一</h3>
        <h3 v-else-if="dianji === 2">二</h3>
        <h3 v-else-if="dianji === 3">三</h3>
        <h3 v-else="dianji">hello</h3>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                dianji: 0
            }
        })
    </script>
</body>

</html>

 v-for 循环基本的列表   

<!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>
    <script src="../js/vue.js"></script>
    <style>
        ul>li {
            border: 1px solid red;
            width: 200px;
        }
    </style>
</head>

<body>
    <div id="root">
        <table>
            <tr>
                <th>学号</th>
                <th>姓名</th>
                <th>爱好</th>
            </tr>
            <tr v-for="p in persons">
                <td>{{p.id}}</td>
                <td>{{p.name}}</td>
                <td>{{p.hobby}}</td>
            </tr>
        </table>

        <ul v-for="p in persons">
            <!-- persons 数组的名字 -->
            <li>{{p.id}}-{{p.name}}-{{p.hobby}}</li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                persons: [
                    { id: "10001", name: "柳清", hobby: "装蛋" },
                    { id: "10001", name: "柳清", hobby: "装蛋" },
                    { id: "10001", name: "柳清", hobby: "装蛋" },
                    { id: "10001", name: "柳清", hobby: "装蛋" }
                ]
            }
        })
    </script>
</body>

</html>

 Vue写购物订单   

<!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>
    <script src="../js/vue.js"></script>
    <style>
        table tr th,
        td {
            border: 1px solid red;
            width: 100px;
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="root">
        <table>
            <tr>
                <th>货名</th>
                <th>单价</th>
                <th>数量</th>
                <th>合计</th>
            </tr>
            <tr v-for="(a,index) in array">
                <td>{{a.name}}</td>
                <td>{{a.money}}</td>
                <td>
                    <!-- v-bind 绑定元素属性 
                    disabled 属性规定应该禁用 input 元素。
                    @click="sub(index)" 通过index来下标来确定具体修改的那个
                    -->
                    <button @click="sub(index)" v-bind:disabled="a.num<=0">-</button>
                    {{a.num}}
                    <button @click="add(index)">+</button>
                </td>
                <!-- 数组中 单价和个数进行相乘 -->
                <td>{{a.sum=a.money*a.num}}</td>
            </tr>
            <tr>
                <td>总价</td>
                <td colspan="3">{{he}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                array: [
                    { name: "苹果", money: 200, num: 0, sum: 0 },
                    { name: "香蕉", money: 200, num: 0, sum: 0 },
                    { name: "橘子", money: 200, num: 0, sum: 0 },
                    { name: "橙子", money: 200, num: 0, sum: 0 },
                ],
                he: 0

            },
            methods: {
                add(index) {
                    // alert(1)
                    return this.array[index].num++
                },
                sub(index) {
                    return this.array[index].num--
                }
            },
            watch: {
                array: {
                    // 默认为true
                    // 深度监视
                    deep: true,
                    // 自动监视
                    // immediate: 其值是true或false,确认是否以当前的初始值执行handler的函数.
                    immediate: true,
                    handler(sum) {
                        this.he = 0 
                        for (var i = 0; i < sum.length; i++) {
                            this.he += sum[i].money * sum[i].num
                        }
                    }
                }
            }

        })

    </script>
</body>

</html>

 Key的原理    列表的过滤   同时降序和升序   Vue.set 的使用

 key原理的案例

:key='a.id' 根据id来匹配dom就会根据id来进行依次匹配

:key='index' 根据index来匹配dom从下面添加不会出现错误，如果从上面添加就会出现第一个被挤下来成为第二个

<!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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <button @click="clickArr">点击添加白龙马</button>
        <ul>
            <!-- :key='a.id' 根据id来匹配dom就会根据id来进行依次匹配 -->
            <!-- :key='index' 根据index来匹配dom从下面添加不会出现错误，如果从上面添加就会出现第一个被挤下来成为第二个 -->
            <li v-for="a,index in array" :key="a.id">
                {{a.id}}-{{a.name}}-{{a.age}} <input type="text"> -{{index}}
            </li>
        </ul>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                array: [
                    { id: "1001", name: "悟空", age: 20 },
                    { id: "1002", name: "八戒", age: 11 },
                    { id: "1003", name: "唐僧", age: 16 },
                    { id: "1004", name: "和尚", age: 18 }
                ]
            },
            methods: {
                clickArr() {
                    this.array.unshift({ id: "1005", name: "白龙马", age: 18 })
                }
            },
        })
    </script>
</body>

</html>

 列表的过滤   同时降序和升序 

<!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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <input type="text" v-model="keyword">
        <button @click="sortType=1">升序</button>
        <button @click="sortType=2">降序</button>
        <button @click="sortType=0">原数据</button>
        <ul>
            <li v-for="a,index in selectArray">
                {{a.id}}-{{a.name}}-{{a.age}}
            </li>
        </ul>
    </div>
    <script>
        let vm = new Vue({
            el: "#root",
            data: {
                array: [
                    { id: "1001", name: "悟空", age: 20 },
                    { id: "1002", name: "八戒", age: 11 },
                    { id: "1003", name: "八唐僧", age: 16 },
                    { id: "1004", name: "和尚", age: 18 }
                ],
                keyword: "",
                sortType: 0
                // selectArray: []
            },
            // // 监视实现
            // watch: {
            //     // 1.使用watch监听input里面需要输出的文本
            //     keyword: {
            //         // 默认先监听一遍
            //         immediate: true,
            //         // 2.获取到输入的文本
            //         handler(val) {
            //             // 3将获取到的数组赋值给定义的一个空数组
            //             // filter它用于把Array的某些元素过滤掉，然后返回剩下的元素。
            //             // 3.将数组进行筛选
            //             this.selectArray = this.array.filter(p => {
            //                 // indexOf 如果要检索的字符串值没有出现，则该方法返回 -1。
            //                 // 不等于-1的时候就是检索到了，将检索到了数据返回到 定义的数组中 selectArray: []
            //                 return p.name.indexOf(val) !== -1
            //             })
            //         }
            //     }
            // },
            // 计算属性
            computed: {
                selectArray() {
                    let list = this.array.filter(p => {
                        return p.name.indexOf(this.keyword) !== -1
                    })
                    // 1.先写点击事件，当sortType大于0时对应的也就执行相应的代码
                    if (this.sortType > 0) {
                        list.sort((s1, s2) => {
                            // console.log(this); vue
                            return this.sortType === 1 ? s1.age - s2.age : s2.age - s1.age
                        })
                    }
                    return list
                },

            }
        })
    </script>
</body>

</html>

Vue.set 的使用

<!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>
    <script src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学校信息：{{name}}</h2>
        <h2>学校地址：{{weizh}}</h2>
        <hr>
        <h1>学生信息</h1>
        <h1>姓名：{{student.name}}</h1>
        <h1>年龄：{{student.age}}</h1>
        <h1 v-if="student.sex">性别：{{student.sex}}</h1>
        <button @click="btn">点击添加sex性别</button>
    </div>
    <script>
        new Vue({
            el: "#root",
            data: {
                name: "宣化",
                weizh: "皇城街道",
                student: {
                    name: "张三",
                    age: 18
                },
            },
            methods: {
                btn() {
                    Vue.set(this.student, 'sex', '男')
                }
            },
        })
    </script>
</body>

</html>
大坤...
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue样式绑定（v-if）
qq_62512326的博客
03-01 810
< body > < div id = " Application " > < div class = " red-box " v-if = " isShow " > < h1 > red box < p > 你好！ < div class = " pink-box " v-else = " false " > < h1 > pink box < p > 我不好!
vue实现条件判断动态绑定样式的方法
10-17
今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue条件绑定处理样式
qq_57305148的博客
07-15 1317
我们在做前端页面时，为了更直观的展示数据，我们希望通过条件判断来让页面显示不同的样式，比如： 首页中的导航栏： 我的频道： 当哪个导航栏的高亮效果显示时，我的频道 中就显示哪一个 思路： 将首页中的激活的标签索引传递给频道编辑组件 在频道编辑组件中遍历我的频道列表的时候判断遍历项的索引是否登录激活的频道标签索引，如果一样则作用一个高亮的css类名 给我的频道中的Button绑定处理样式：:class="{ active: index === active }" 此处用到了v-bind：class 语
Vue2（三）：绑定样式、条件渲染(v-if，v-show)、列表渲染(v-for)、key的原理、列表过滤、列表排序
weixin_42044763的博客
08-12 2056
写法:class=“xxx” xxx可以是字符串、对象、数组。 字符串写法适用于：类名不确定，要动态获取。 对象写法适用于：要绑定多个样式，个数不确定，名字也不确定。 数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用。 2.绑定style样式 其中xxx是动态值。 其中a、b是样式对象。 二、条件渲染 1.v-if 写法: (1).v-if=“表达式” (2).v-else-if=“表达式” (3).v-else=“表达式” 适用于：切换频率较低的场景。（因为会动DOM树，节点删来删去不
v-if判断多个列表优雅写法
热门推荐
范天缘的博客
05-02 1万+
业务中经常碰见点击那个列表显示哪块内容，如果给每个v-if绑定不同的变量是很不优雅的 <Perone v-if="active1"/> <Pertwo v-if="active2"/> <Perthree v-if="active3"/> <Perfour v-if="active4"/> 这样写的话 代码显得非常冗余 可以给每个子组件绑定同一个变量名，但变量值不
Vue条件循环判断+计算属性+绑定样式v-bind的实例
10-18
在Vue.js中，条件循环判断、计算属性以及绑定样式是构建动态用户界面的关键特性。首先，我们来看条件判断，这包括`v-if`、`v-else-if`、`v-else`和`v-show`。 1. `v-if`指令用于在满足特定条件时才渲染元素。例如，...
使用Vue中 v-for循环列表控制按钮隐藏显示功能
10-17
在Vue.js中，`v-for`指令用于遍历数组或对象，生成一组DOM元素。它是一种非常强大的功能，常用于动态渲染列表。本篇文章将详细讲解如何利用`v-for`循环列表来控制按钮的隐藏与显示，以及如何处理列表内的事件绑定，...
Vue2.0 v-for filter列表过滤功能的实现
10-18
`v-for`是Vue中用于渲染列表的强大工具，其语法通常为： ```html <element v-for="(item, index) in array" :key="index"> {{ item }} ``` 其中，`item`代表数组中的每一项，`index`是当前项的索引，`array`...
vue2和vue3的v-if与v-for优先级对比学习
10-14
在Vue 2.x中，如果在一个元素上同时使用v-if和v-for，v-for的优先级高于v-if，这意味着v-for会先执行，然后v-if再决定是否渲染结果。 然而，在Vue 3.x中，这种行为发生了变化。现在v-if的优先级高于v-for，这意味着...
Vue中的v-for循环key属性注意事项小结
10-18
在Vue.js中，`v-for`指令用于遍历数组或对象，动态渲染列表内容。`v-for`循环中，`key`属性是一个重要的优化机制，它允许Vue追踪每个节点的身份，以便更有效地更新和重排DOM。以下是关于`v-for`循环中`key`属性的...
【vue】事件绑定、样式绑定及v-if、v-show、v-for渲染
webxuj的博客
08-30 743
可以阻止冒泡，阻止从当前元素经过的所有冒泡行为。事件只触发一次,触发完之后,事件就会解绑。绑定点击事件 可以简写方式。添加事件侦听器时让事件在捕获阶段触发。嵌套的标签会有冒泡行为，使用。......
VUE：列表的过滤与排序
weixin_30667649的博客
11-12 327
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>06_列表渲染_过滤与排序</title> </head> <body> <!-- ...
【Vue】条件与循环语句 | v-if v-show v-for实例
Create value with coding
12-08 1万+
条件与循环语句 引言 在前端开发之中, 灵活的控制渲染是很有必要的，快速构建也是很有必要的，条件渲染和循环渲染，在视图构建中起着重要作用. 条件语句 v-if v-if 指令用于条件性地渲染内容 此内容只会在指令的表达式返回除了 false，0，""，null，undefined 和 NaN 外的值的时候被渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
vue中的指令v-for循环遍历、v-if条件判断v-show,v-on事件监听、事件修饰符
sdh19981202的博客
10-03 4439
vue中的条件渲染 v-else-if 当有else分支逻辑的时候，可以给该元素加上v-else指令来控制，v-else会根据上面的那个v-if来控制，效果与v-if相反，注意，一定要紧挨着 还有v-else-if指令可以实现多分支逻辑 在元素上使用v-if条件渲染分组 根据表达式的值true或false在DOM中生成或者移除一个元素（或多个元素）。 有点类似JavaScript中的if条件判断。在Vue中除了v-if也有v-else-if和v-else之类； 在元素上使用v-show条件渲
vue实现对数据进行升序降序排列
紫月i的博客
04-27 702
【代码】vue实现对数据进行升序降序排列。
vue中将for循环里if判断的所有数据输出
weixin_35751194的博客
02-12 175
在 Vue 中，您可以在模板中使用 v-for 指令进行循环，并在循环内使用 v-if 指令进行判断。例如： <template> <ul> <li v-for="item in items" v-if="item.isActive"> {{ item.name }} </li> </ul> </...
Vue 商品排序，筛选
Huang_DW的博客
07-23 1528
<template> <div> <div class="home-nav"> <!-- 导航 --> <van-tabs @change="onNavs"> <van-tab v-for="(item,index) in navs" :name="item.cid" :title="item.cname"></van-tab> </van-tabs>
Vue+Node：商品列表的分页、排序、筛选，添加购物车
theVicTory的博客
03-27 3628
1、分页 商品列表的分页实现是后台根据前端请求的页面大小、页码位置，去数据库中查询指定位置的数据然后返回给前端。比如页面大小为8，要查第3页的数据，则跳过2*8条数据，然后返回接下来的8条数据。 实现滚动加载：页面刚一加载完成并不需要请求所有数据，只显示一部分。当用户下拉到页面底部时，再去请求数据并拼接到商品数据列表中。通过vue-infinite-scroll插件实现滚动加载，在框架末尾插入...
用vue仿淘宝商品筛选
upup
03-28 2518
css略，点击牛仔裤添加到已选条件，点击x取消选择 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
ESLint: Elements in iteration expect to have 'v-bind:key' directives. (vue/require-v-for-key)
最新发布
06-12
这个问题是ESLint的一个提示，意思是在Vue.js中使用v-for指令循环遍历元素时，每个元素都需要绑定一个唯一的key值，以优化渲染性能。你需要在使用v-for指令的元素上添加一个v-bind:key指令，并将其绑定到一个唯一的值上，比如一个ID或者索引值。例如： ``` <template> <ul> <li v-for="(item, index) in items" :key="item.id">{{ item.name }}</li> </ul> </template> ``` 在上面的例子中，我们使用v-for指令循环遍历一个items数组，并将每个元素绑定到一个唯一的key值上，这里我们使用了item的ID属性作为key值。这样做可以帮助Vue.js在更新DOM时更快地定位到差异，并提高渲染性能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值