前言

  操作元素的 class 样式列表和 style 内联样式为数据绑定是前端开发中一个常见的需求,这些样式都属于元素的属性 attribute ,因此我们可以通过 v-bind 来动态绑定元素的样式属性。本文来总结一下这两个属性相关的知识点,便于日后的复习学习。

正文

  1.class的动态绑定

  (1)对象语法,即class动态绑定一个对象。

   <style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<div id="app">
<!-- 绑定html clas样式 -->
<div :class="{red:isRed,green:isGreen}">对象语法1</div>
<div :class="classObj1">对象语法2</div>
<div :class="classObj2">对象语法3</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
isRed: true,
isGreen: false,
classObj1: {
red: true,
green: false,
},
}
},
computed: {
classObj2() {
return {
red: true,
green: false,
}
},
},
})
</script>

  运行结果如下:

  对于对象语法1:class 绑定一个字面量类型的对象值,其中 red 属性值为 true,green 属性值为 false ,最终结果为绑定了red类选择器的样式。

  对于对象语法2和语法3:class 绑定一个对象的名,并非具体的对象的值,该键名对应了具体的对象value值,该对象的 red 属性为true,green属性为false,最终结果为绑定了red类型选择器的样式,语法2和语法3的区别在于对象的声明在计算属性还是data中。

  (2)数组语法,即class动态绑定一个数组类型

   <style>
.red {
color: red;
}
.green {
color: green;
}
</style>
<div id="app">
<!-- 绑定html clas样式 -->
<div :class="[classRed,classGreen]">数组语法1</div>
<div :class="[isRed?'red':'']">数组语法2</div>
<div :class="classArr">数组语法3</div>
<div :class="[{red:isRed},classGreen]">数组中对象混合用法</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
isRed: true,
isGreen: false,
classRed: "red",
classGreen: "green",
classArr:["red","green"],
}
}
}) </script>

  运行结果如下:

  对于数组语法1:class绑定一个数组值,其中数组中的元素代表每一个类选择器的样式,最终绑定结果为red和green选择器的样式,当color样式重复,页面渲染后面的样式,颜色为绿色。

  对于数组语法2:class绑定一个数组值,只有一个元素,第一个元素由条件表达式确定。样式渲染如上。

  对于数组语法3:class绑定一个数组名,并非具体的数组值,该名对应了具体的数组 value 值。

  对于数组语法4:class绑定一个数组,数组中第一个元素为一个对象,不难理解。

  (3)代码中常用的样式绑定

    <style>
.red {
color: red;
}
</style>
<div id="app">
<div :class="isRed?'red':''">代码中常用class绑定</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
isRed: true,
}
}
})
</script>

  运行结果如下:

  2.style的动态绑定

    <div id="app">
<!-- 绑定内联样式 -->
<div :style="{color:styleRed}">对象语法1</div>
<div :style="styleObj1">对象语法2</div>
<div :style="styleObj2">对象语法3</div>
<div :style="[styleObj1]">数组语法</div>
</div>
<script>
new Vue({
el: "#app",
data() {
return {
styleRed: "red",
styleObj1: {
color: "red"
}
}
},
computed: {
styleObj2() {
return {
color: "red"
}
}
},
})
</script>

  运行结果如下:

  style动态绑定样式,不需要再style标签中添加对应的类选择器,和原生js修改css样式十分接近。

写在最后

  以上就是本文的全部内容,希望给读者带来些许的帮助和进步,方便的话点个关注,小白的成长踩坑之路会持续更新一些工作中常见的问题和技术点。

vue-class和style样式绑定的更多相关文章

  1. vue 自学笔记(4): 样式绑定与条件渲染

    一:对象绑定 Vue 对于页面的样式加载也有独特的方式,按照 Vue 提供的方式,我们可以轻松的控制它们的呈现. 假使我们要实现点击 div 变色 Vue 提供的样式方案的本质是对元素节点进行属性的绑 ...

  2. vue 动态添加 <style> 样式 vue动态添加 绑定自定义字体样式

    created(){ //动态添加自定义字体样式 let style = document.createElement('style'); style.type = "text/css&qu ...

  3. Vue.js 内联样式绑定style

    html <div class="Menu" v-bind:style="{height:clientHeight}"> </div> ...

  4. vue基础篇---class样式绑定

    因为class的绑定在实际的工作中会经常用到.所以特意记录一下,有好几种方法. 对象绑定方法,另外一个值来控制显示隐藏 <!DOCTYPE html> <html lang=&quo ...

  5. VUE中的style 样式处理的Scope (<style scope>)

    在VUE组件中,为了让样式私有化,不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块. 但是这样的话,就会导致无法修改其他第三方组件样式,或者是内嵌的样式,解决方案 ...

  6. Vue样式绑定、事件绑定

    1.样式绑定 1.1class类标签绑定 <p :class="对象"> <p :class="数组"> <p :class=&q ...

  7. Vue基础语法(样式绑定,事件处理,表单,Vue组件)

    样式绑定 事件处理 表单 Vue组件 样式绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8 ...

  8. Vue.js之Vue计算属性、侦听器、样式绑定

    前言 上一篇介绍了Vue的基本概念,这一篇介绍一下Vue的基本使用. 一.搭建一个Vue程序 1.1 搭建Vue环境 搭建Vue的开发环境总共有三种方法: 引入CDN <script src=& ...

  9. 3-5 Vue中的样式绑定

    Vue中的样式绑定: 本案例,简单设计一个<div>的点击绑定事件来改变div的样式效果 方法一:[class] ①(class和对象的绑定) //如上,运用class和一个对象的形式来解 ...

随机推荐

  1. SLF4J日志桥接的应用

    最近在给公司的测试部门开发一套自动化测试框架,为了是框架产生的测试报告更易于分析,我考虑将每一个用例与运行过程中产生的日志相关联,为了实现这样的效果,首先就需要统一项目的日志输出,那么具体怎么做呢? ...

  2. Django orm 常用查询筛选总结

    本文主要列举一下django orm中的常用查询的筛选方法: 大于.大于等于 小于.小于等于 in like is null / is not null 不等于/不包含于 其他模糊查询 model: ...

  3. windows上传本地项目Github远程仓库(另附设置git网页链接)

    一:关于Windows平台安装git以及github的注册不在详细描述,可以参考如下经验: 安装教程:https://jingyan.baidu.com/article/925f8cb8a8e91cc ...

  4. jvm源码解读--02 Array<u1>* tags = MetadataFactory::new_writeable_array<u1>(loader_data, length, 0, CHECK_NULL); 函数引入的jvm内存分配解析

    current路径: #0 Array<unsigned char>::operator new (size=8, loader_data=0x7fd4c802e868, length=8 ...

  5. Floyd弗洛伊德算法

    先看懂如何使用 用Java实现一个地铁票价计算程序 String station = "A1 A2 A3 A4 A5 A6 A7 A8 A9 T1 A10 A11 A12 A13 T2 A1 ...

  6. PWA渐进式web应用

    PWA(Progressive Web App)是一种理念,使用多种技术来增强web app的功能,可以让网站的体验变得更好,能够模拟一些原生功能,比如通知推送.在移动端利用标准化框架,让网页应用呈现 ...

  7. 使用Fileupload完成文件的上传下载

    目录 使用Fileupload完成文件的上传下载 为什么需要进行文件上传下载? 引入jar包 文件上传 注意事项 编写一个简单的文件上传jsp页面 编写Servlet Student类用于封装数据,后 ...

  8. DVWA靶场练习-Command Injection命令注入

    Command Injection 原理 攻击者通过构造恶意参数,破坏命令的语句结构,从而达到执行恶意命令的目的.

  9. web笔记随笔

    1.Web服务组件 8.第三方内容:广告统计.mockup 7.Web前端框架: HTML5. jQuery. Bootstrap 6.Web应用: CMS. BBS. Blog 5.Web开发框架: ...

  10. 【LeetCode】155. 最小栈

    155. 最小栈 知识点:栈:单调 题目描述 设计一个支持 push ,pop ,top 操作,并能在常数时间内检索到最小元素的栈. push(x) -- 将元素 x 推入栈中. pop() -- 删 ...