Vue.js 绑定样式 条件渲染 v-if判断 v-for 循环基本的列表 Vue写购物订单 Key的原理 列表的过滤 同时降序和升序 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>
    <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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值