Vue——02-01v-bind中的动态绑定属性、计算属性的基本操作

最新推荐文章于 2023-11-17 16:04:32 发布

Southern Wind

最新推荐文章于 2023-11-17 16:04:32 发布

阅读量820

点赞数

分类专栏： Vue 文章标签： vue.js javascript html es6

本文链接：https://blog.csdn.net/nanchen_J/article/details/120421312

版权

Vue 专栏收录该内容

44 篇文章 11 订阅

订阅专栏

v-bind动态绑定class(对象语法)

v-bind动态绑定class(数组用法)

v-bind动态绑定style

v-bind动态绑定style(对象语法)

v-bind动态绑定style(数组语法)

计算属性的基本操作

v-bind动态绑定class(对象语法)

如果对DOM元素的节点的class进行动态绑定，xuanzecidom是否有指定的class属性。例如：给h2标签加上class='active',当DOM中有class时，会变成白色，再写一个按钮绑定，点击过后变成黑色再次点击变成白色，类似于一个开关灯效果

<!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>动态绑定class</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .title{
            background-color: rgb(235, 235, 160);
            color: #000;
        }
        .active{
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2 class="title" :class="{active:isActive}">{{message}}</h2>
        <button @click='change'>开关灯</button>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'我会变色',
                active:'active',
                isActive:true,
            },
            methods:{
                change(){
                    this.isActive = !this.isActive;
                    
                }
            }
        })
    </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>动态绑定class</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .title{
            background-color: rgb(235, 235, 160);
            color: #000;
        }
        .active{
            background-color: #000;
            color: #fff;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2 class="title" :class="{active:isActive}">{{message}}</h2>
        <h2 class="title" :class="getClass()">{{message}}</h2>        //封装起来
        <button @click='change'>开关灯</button>
    </div>
    <script>
        var box = new Vue({
            el:'#box',
            data:{
                message:'我会变色',
                active:'active',
                isActive:true,
            },
            methods:{
                change(){
                    this.isActive = !this.isActive;
                    
                },
                getClass(){                //写在方法里
                    return {active:this.isActive}
                },
            }
        })
    </script>
</body>
</html>

效果和上图一致。

v-bind动态绑定class(数组用法)

class属性中可以放数组，会依次解析成对应的class。

<!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>v-bind动态绑定class(数组用法)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <style>
        .aaa{
            color: #f00;
        }
        .bbb{
            background-color: bisque;
        }
    </style>
</head>
<body>
    <div id="app">
            <!-- 不加会被当成变量 --> <!-- 加上单引号当成字符串 -->
        <h2 :class="[active,line]">{{message}}</h2>
        <h2 :class="getStyle()">{{message}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el:'#app',
            data:{
                message:'你好啊',
                active:'aaa',
                line:'bbb',
            },
            methods:{
                getStyle(){
                    return [this.active,this.line]
                }
            }
        })
    </script>
</body>
</html>

<h2 :class="[active,line]">{{message}}</h2> //变量

<h2 :class="['active','line']">{{message}}</h2> //字符串

这段代码[]中的值如果是加引号的话就会被当做字符串，如果要是不加引号的话就为变量

v-bind动态绑定style

v-bind动态绑定style(对象语法)

<!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>v-bind动态绑定style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>
<body>
    <div id="box">
        <h2 :style="{fontSize:'50px'}">{{message}}</h2>
        <h2 :style="{fontSize:fontsize}">{{message}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el:'#box',
            data:{
                message:'你好',
                fontsize:'60px',
            },
        })
    </script>
</body>
</html>

<h2 :style="{fontSize:'50px'}">{{message}}</h2>

<h2 :style="{fontSize:fontsize}">{{message}}</h2>

此处的样式属性必须是驼峰命名法，不可为font-size！

同上：如果是加引号的话就会被当做字符串，如果要是不加引号的话就为变量

v-bind动态绑定style(数组语法)

<!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>v-bind动态绑定style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="box">
        <h2 :style="[baseStyle]">{{message}}</h2>
        <h2 :style="getStyle()">{{message}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el: '#box',
            data: {
                message: '你好',
                baseStyle: { backgroundColor: 'red' },
            },
            methods: {
                getStyle() {
                    return [this.baseStyle]
                }
            }
        })
    </script>
</body>
</html>

上方代码中的[]中的是数组，可以写多个

<h2 :style="[baseStyle]">{{message}}</h2>

计算属性的基本操作

如何去拼接两个字符串呢？

方法一：

<!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>v-bind动态绑定style</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 不加会被当成变量 -->
        <!-- 加上单引号当成字符串 -->
        <h2>{{firstName+'--'+lastName}}</h2>
        <h2>{{getFullName()}}</h2>
        <h2>{{FullName}}</h2>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                firstName: "Nan",
                lastName: "chen"
            },
            methods: {
                getFullName() {
                    return this.firstName + '--' + this.lastName

                }
            },
            // 用于计算属性，比如购物车总价，属性中不需要加括号
            computed: {
                // FullName(){
                //     return this.firstName+'--'+ this.lastName
                // }
                FullName: function () {
                    return this.firstName + '--' + this.lastName
                }
            }
        })
    </script>
</body>
</html>
</body>
</html>

效果如图：

computed：新属性，用于计算，例如购物车的总和，平均数等。属性中不需要加括号

Southern Wind

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue——02-01v-bind中的动态绑定属性、计算属性的基本操作

v-bind动态绑定class(对象语法)如果对DOM元素的节点的class进行动态绑定，xuanzecidom是否有指定的class属性。例如：给h2标签加上class='active',当DOM中有class时，会变成白色，再写一个按钮绑定，点击过后变成黑色再次点击变成白色，类似于一个开关灯效果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <m.
复制链接

扫一扫