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

简介: v-bind中的动态绑定属性、计算属性的基本操作

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>

效果如下图所示:

20210922194916974.gif

封装写法如下:

<!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>        //字符串

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

20210922195726258.png

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>

20210922200239199.png

<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>

效果如图:

20210922201516228.png

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


相关文章
|
2天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
5天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
54 12
|
2天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
2天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
JavaScript 前端开发 数据格式
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
145 1
|
23天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
51 8
|
24天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
64 1
|
3月前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之,Vue 数据驱动视图是一种先进的理念和技术,它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性,开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中,数据驱动视图将继续发挥重要作用,推动着应用界面的不断创新和进化。
108 58
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。

热门文章

最新文章