前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >我的 Vue.js 学习日记 (四) – v-bind:class / style 用法

我的 Vue.js 学习日记 (四) – v-bind:class / style 用法

作者头像
全栈程序员站长
发布2022-07-21 13:15:00
4620
发布2022-07-21 13:15:00
举报
文章被收录于专栏:全栈程序员必看

大家好,又见面了,我是你们的朋友全栈君。

上节回顾

上回看了模板语法、计算属性与监听器,今天继续往下看。

v-bind 与 class

v-bind:class4 种方式,分别是: 1.内联

代码语言:javascript
复制
<h3 v-bind:class="{ active : isActive,'text-danger' : hasError }">i am a h3</h3>

2.数据对象

代码语言:javascript
复制
<h3 v-bind:class="classDataObject">i am a h3</h3>

3.计算属性

代码语言:javascript
复制
<h3 v-bind:class="classComputedObject">i am a h3</h3>

4.数组

代码语言:javascript
复制
<h3 v-bind:class="[isActive, hasError]">i am a h3</h3>

无论是哪种方式绑定,依据都是一样的,表达式成立就输出,不成立就不输出

内联输出结果:

代码语言:javascript
复制
<h3 class="active">i am a h3</h3>

tip:可以通过在浏览器控制台修改app.hasError的值来观察h3标签class的变化

tip:组件中同样适用该绑定方式

v-bind 与 style

绑定style与绑定class基本一样:

  1. 内联
  2. 数据对象
  3. 计算属性
  4. 数组

都可以,例如绑定计算属性:

html:

代码语言:javascript
复制
<tr v-bind:style="size">

data:

代码语言:javascript
复制
data: { fontSize: 'fontSize: 20px;'}

computed:

代码语言:javascript
复制
computed:{
  size: function () {
    return this.fontSize
  }
}

输出:

代码语言:javascript
复制
<tr style="font-size: 20px;"></tr>

tip:有提到绑定浏览器引擎前缀的CSS属性时,vue会自动添加

小节

绑定class应该是很常用的一个指令,需要一些练习熟练掌握。

近些天身体有点不太好,等好了之后把拖拉的补回来。

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/107539.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年4月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 上节回顾
  • v-bind 与 class
  • v-bind 与 style
  • 小节
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档