vue如何绑定css样式,vue 设置css
vue怎么绑定style样式改变div宽度
可以这一写，width是style的一个数据，js调用数据的方式就有 1、使用小数点的方式 2、使用中括号的方式 但是你的代码调用时 200要带单位 可以看到平时写法width的数字后面是有单位的 所有在使用函数的时候也需要带上哦 document.getElementById(
创新互联公司于2013年开始，是专业互联网技术服务公司，拥有项目网站设计制作、成都网站制作网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元玉环做网站,已为上家服务,为玉环各地企业和个人服务,联系电话:028-86922220
如何在Vue中有条件地使用CSS类
a v-bind:class="index==0?'current1':'current2'" test/a
上面代码 index请在data里面定义
05《Vue 入门教程》Vue 动态样式绑定
本小节我们将介绍 Vue 中如何动态绑定样式。包括 Class 的绑定、内联样式 Style 的绑定。掌握样式绑定的多种形式是其中的重点难点。同学们可以在学完本小节之后对样式的绑定方式加以总结，再通过反复的练习来加深印象。
通过 v-bind 指令给 DOM 元素动态绑定 Class 和 Style，一般用于根据不同数据状态切换元素样式的场景下。
我们可以通过数组和对象的两种形式绑定元素的 Class。
通过传给 v-bind:class 一个对象，以动态地切换 class：
代码解释： 上面的语法表示 show 这个 class 存在与否将取决于数据属性 isShow 是否为真值。
具体示例：
实例演示
"运行案例" 可查看在线运行效果
代码解释： HTML 代码第 2 行，我们给 p 绑定样式，当 isHide 为真值时， 其渲染结果为 ，否则 。 打开控制台，修改 vm.isHide 的值可以动态改变页面效果。
此外， v-bind:class 指令也可以与普通的 class 属性共存。 语法：
当有如下模板:
和如下 data：
结果渲染为：
代码解释： 当 isShow 或者 hasError 变化时，class 列表将相应地更新。
例如，如果 hasError 的值为 true ， isShow 的值为 true ，class 列表将变为 "defaultClass show text-danger" 。
例如，如果 hasError 的值为 true ， isShow 的值为 false ，class 列表将变为 "defaultClass text-danger" 。
在之前介绍的案例中，我们将绑定的数据对象内联定义在模板里， 这样显得比较繁琐。其实，我们可以统一定义在一个 classObject 中：
实例演示
"运行案例" 可查看在线运行效果
结果渲染为：
代码解释： HTML 代码中，我们首先给 p 一个固定样式 defaultClass， 然后通过 classObject 给 p 绑定样式。 JS 代码 第 6-9 行，我们定义了数据 classObject，它有两个属性：1. 属性 show，值为 true，2. 属性 text-danger，值为 false。所以，最后页面渲染的效果是：
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：
实例演示
"运行案例" 可查看在线运行效果
结果渲染为：
代码解释： HTML 代码中，我们通过 classObject 给 p 绑定样式。 JS 代码 第 6-11 行，我们定义了计算属性 classObject，它返回一个对象，该对象有两个属性：1. 属性 show，值为 true，2. 属性 text-danger，值为 false。所以，最后页面渲染的效果是：
我们可以把一个数组传给 v-bind:class ，以应用一个 class 列表：
实例演示
运行案例点击 "运行案例" 可查看在线运行效果
渲染为：
代码解释： 在 HTML 代码中，我们通过数组给 p 绑定样式，数组中有 classA 和 classB 两个值。 在 JS 代码第 6-7 行定义了 classA 和 classB 两个字符串，它的格式和元素 class 的格式相同，不同的样式类之间以空格相隔。
如果你也想根据条件切换列表中的 class，可以用三元表达式：
这样写将始终添加 classB 的样式，但是只有在 isShow 为真时才添加 showClass 。
不过，当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象的形式来表达数组中的某一项：
代码解释： 在 HTML 中，p 绑定一个样式数组，数组第一项是一个对象表达式 { showClass: isShow }。当 isShow 为 true 时样式最终绑定为： ；当 isShow 为 false 时样式最终绑定为： ；
和 Class 的绑定一样，Style 的绑定同样可以通过数组和对象的两种形式。
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名：
实例演示
"运行案例" 可查看在线运行效果
渲染为：
代码解释： 在 HTML 代码中，我们给 p 绑定 background-color 和 width 两个内联样式，它们的值在 data 中定义。
在模板中写较为复杂的表达式语法显得比较繁琐，通常直接绑定到一个样式对象更好，这会让模板显得更加清晰：
实例演示
"运行案例" 可查看在线运行效果
渲染为：
代码解释： 在 HTML 代码中，我们给 p 绑定数据 styleObject，它们的值在 data 中定义。
v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：
实例演示
"运行案例" 可查看在线运行效果
渲染为：
本小节我们学习了如何通过 v-bind 来动态绑定样式。主要有以下知识点：
vue.js怎么动态设置css
template
ul
li v-for="tab in tabs" :class="{ 'is-active': tab.isSelected}"
a :href="tab.href" @click="selectTab(tab)"{{tab.name}}/a
/li
/ul
script
selectTab(selectedTab) {
this.tabs.forEach(tab = {
tab.isSelected = (tab.name == selectedTab.name);
})
}
第六节:Vue指令:v-bind动态属性绑定
上一小节的学习,让我们理解以v开头的指令后面跟的将是表达式,同样标签也有一些合法的标签属性.如果想将这些属性的值变为表达式,我们可以使用Vue提供的v-bind:指令.
v-bind:指令会将普通属性的值变为表达值,比如
显示结果
通过示例显示的结果就了解
未使用 v-bind 指令的 class 属性的值是一个字符串,表示给标签添加一个 className 的类名
使用 v-bind 指令的 class 属性值不在是字符串,而是表达式, 表达式里的 className 不是一个普通的字符,而是一个变量, Vue 实例 data 属性中的数据
Vue 对于 v-bind 指令还提供了简写方式,如下
对于 v-bind 指令的认识和基本使用,我们已经了解了,
那么接下来就看看 v-bind 使用过程中的一些问题和注意项
通过上面的学习,我们知道, v-bind 指令可以让我们将属性值关联到Vue data 数据中,这样的属性,我们称作为属性的动态绑定
属性的动态绑定比较符合vue以数据为驱动的模式,如果需要修改那个属性值,就可以直接通过修改 Vue 数据即可,
例如,项目中的轮播就像轮播图中的数据, 在替换轮播数据的时候就会非常方便
来个例子: 动态改变显示图片
这个时候我们只需要改变数据里的src的值,图片就会发生变化
注意:
动态属性绑定, 在我们需要的时候在使用,如果一个属性的是是固定的,
并不会在未来发生改变, 就没有必要动态绑定属性.
但在属性动态绑定过程中有两个属性比较特殊, 这两个属性就是class 和style属性,
在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
接下来好好研究研究
动态绑定class 就是使用v-bind指令来绑定, 一但使用v-bind指令后,class属性的值不在是一个字符串,而是一个表达式,
比如未使用动态绑定示例:
未使用 v-bind 指令动态绑定属性时, class的值就是字符串, 上例中h2有一个类名,类名是msg
使用了动态绑定示例:
如果使用动态绑定指令, 那么此时class后面的引号不在是字符串,而是一个 JavaScript 表达式, msg 也就成为了一个变量,因此此时h2标签的类名不是字符串 msg , 而是数据中 msg 中的值
示例:
显示结果
此时通过示例,我们就发现使用动态绑定class属性的 div , class 属性值被替换为了 Vue data 属性中的数据, 也就是说动态绑定 class 属性的 msg 是一个变量
没有使用动态绑定 class 属性的值就是一个普通的字符串 msg
动态绑定class 和 没有动态绑定的class可以同时使用, 不冲突,Vue会将动态 class 属性与普通 class 属性在最后显示是合并到一起
显示结果:
通过示例结果发现,这样使用,h2将有两个类名,一个是 wrap , 一个是 box ,
其中 wrap 是普通class属性的值, box 是动态class属性值 msg 变量在 Vue data 属性中所表示的值
我们千万不要在动态绑定 class 属性中像以前利用空格一样绑定多个类名
这样的写法就会报错, 那么如何才能做到使用动态属性绑定多个类名呢,
有的时候我们希望可以在一个DOM元素上动态绑定多个类名,
因为动态绑定的 class 值是表达式,我们就可以利用数组来罗列多个动态绑定的类名,
因此可以 v-bind:class 动态绑定 class 值中协商数组，使用数组来罗列多个绑定的 class 类名
示例入校:
这样渲染出来的结果h2 标签会同时拥有box 和wrap两个类名
既然动态绑定class的值是表达式,那么我们就可以在表达式里,写一些基本的表达式处理数据,
通过逻辑的判断来决定要不要给DOM元素添加这个类名
比如
示例结果:
通过实例,我们会发现, 当 isTrue 的值为 true 时, h2 标签有类名, 为 false 是,值为空字符串,无类名.
因此通过这个例子,我们就可以利用数据isTrue布尔值的判断来切换类名,改变样式
示例如下:
上面的实例, 在点击是button按钮时, 会切换 h2 标签的类名,同时会改变 h2 的字体样式.
注意:又到了教会你们,却不推荐你们使用的时刻来了
你要问我为什么不推荐用?
那么我们不妨自己想一想,如果我一个标签上有多个需要动态切换的类名怎么办
我们是不是会想到如下的写法:
如果你真的这么写了, 你会发现,后面动态绑定的class没有任何效果, 所以这种写法是有问题的
同时我们也会发现这种三目表达式切换类名也不是特别友好,
此时此刻,此情此景, 我们就不得不探讨一下两个问题?
喝口水,接着往下聊.
上回咱们聊到,如何解决如何更好的绑定多个类名的切换.
都已经知道了动态绑定class的值是表达式, 所以我们可以将 v-bind:class 值 写成一个对象，以动态地切换 class：
语法说明:
因为对象可以有多个属性值对, 因此我们可以在对象中传入更多属性来动态切换多个 class。
写法说明:
此时,我们就可以利用所学重新修改上面点击改变样式案例的写法
这样我们就可以做到两个类名之间的切换, 如果希望有多个类名切换, 可以继续给对象添加属性
v-bind 动态绑定属性除了 class 比较特殊外,还有一个 style 行内样式属性也比较特殊
显示结果:
需求分析：
先看看值为对象的用法
动态绑定style属性说明:
如果使用动态绑定属性style里的对象值不加引号, 就会有如下的问题:
例如
上面的这种写法就会报错, red 和 30px 会被当做变量去 Vue data 属性中找对应的数据, 但是找不到就报错
正确的写法应该是这样的
也能正确显示结果, 但是要注意字符串嵌套问题
相信通过刚才的例子,你也发现了,我们发 font-size 的写法改为了 fontSize .
因为CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case) 都可以：
因此,在普通的 style 属性中一下两种写法都可以
但是一旦使用了动态绑定, style 属性的值将变成JS表达式,
表达式里的大括号即为JS对象, 对象属性的标识符是不支持 - 连字符的,
如果我们有两种处理方案,
因此动态绑定需要如下写法
推荐用驼峰写法, 对象的值也可以是变量
动态属性style的样式值,CSS属性中, color 是字符串 'red' 值, 字体大小 font-size 的值确实vue数据中 fontSize 的值,显示结果没有任何变化
这样也会有一个不好的点,就是,如果样式特别多, 就会有点麻烦,
如何解决对象写法,当属性过多时的复杂问题呢?
因为动态属性style的值是一个对象,因此 我们可以把对象提取出来直接作为vue 数据data属性值,那么我们就可以直接绑定一个对象就可以了
而且直接绑定一个对象,看起来更清晰
示例如下:
如果我们想动态修改样式也可以如下处理
我们也可以扩展对象的用法, 给动态属性的值绑定为数组, 数组中就可以使用多组样式对象来绑定CSS样式
这样的写法,可以将样式才分, 可以做到样式复用,
当前文章：vue如何绑定css样式,vue 设置css
分享URL：http://6mz.cn/article/dsedjds.html