1, 绑定html class

1), 直接绑定

   <div>
isActive 为true, 则显示 active css
<p v-bind:class="{active: isActive}">哈哈</p>
</div>
data() {
return {
isActive: true,
}
},

2), 多个值可通过对象的方式绑定:

<!--可以绑定为对象-->
<div>
<p v-bind:class="styleObj"> 哈哈 </p>
</div>
data() {
return {
styleObj: {
active: true,
'demo': true
}
}
},

3), 通过computed 绑定:

<div>
<p v-bind:class="styleObj1"> 哈哈哈啊</p>
</div>
computed: {
styleObj1() {
return {
"active": this.isActive,
"demo": this.isDemo
}
}
}

4) , 数组语法

<!--使用表达式绑定-->
<ul>
<li :class="[{active: index % 2 == 0}, 'info-' + id]" v-for="(name, index) in names ">{{ name }}</li>
</ul>
data() {
return {
isActive: true,
isDemo: true,
styleObj: {
active: true,
'demo': true
},
id: ,
demo1: "demo11",
demo2: "demo22",
names: ['wenbronk', 'vini', 'lisa'],
stob: {
color: "red",
fontSize: "24px"
}
}
},

5), 绑定内联样式

<!--绑定内联样式-->
<div>
<p :style="stob"> 内敛样式 </p>
</div>
stob: {
color: "red",
fontSize: "24px"
}

vue-03-style与class的更多相关文章

  1. 练习vue(class,style属性)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 深入理解VUE样式style层次分析

    刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...

  3. 013——VUE中多种方式使用VUE控制style样式属性

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  5. Vue 03

    目录 组件 组件的分类 组件的特点 组件的使用 组件传参-父传子 组件传参-子传父 组件 组件就是html, css和js文件的集合体, 实现对代码的复用, 组件就是vue对象 组件的分类 根组件 & ...

  6. Vue 设置style样式

    1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...

  7. Vue 设置style属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. vue中style下scope的使用和坑

    在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件 ...

  9. VUE中 style scoped 修改原有样式

    作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...

  10. Vue 的style绑定显示background-image

    data () { return { img: require('你的json资源路径') } } :style="{backgroundImage: 'url(' + img + ')'} ...

随机推荐

  1. CentOS_mini下make安装

    执行make时显示: make: *** No targets specified and no makefile found. Stop. 用网上的教程: wget http://ftp.gnu.o ...

  2. [费用流][NOI2008]志愿者招募

    志愿者招募 题目描述 申奥成功后,布布经过不懈努力,终于成为奥组委下属公司人力资源部门的主管.布布刚上任就遇到了一个难 题:为即将启动的奥运新项目招募一批短期志愿者.经过估算,这个项目需要N 天才能完 ...

  3. 查看class实际执行的类路径

    查看class真实归属的jar包位置getClass().getClassLoader().getResource(getClass().getName().replace('.', '/') + & ...

  4. wince 6.0 汉字乱码

    CStdioFile file; file.Open(…); file.WriteString(_T("abc你好"));//只能写入abc 解决办法: 使用setlocale语句 ...

  5. Alpha 冲刺 (6/10)

    队名 火箭少男100 组长博客 林燊大哥 作业博客 Alpha 冲鸭鸭鸭鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 协调各成员之间的工作 测试服务器并行能力 学习MSI.CUDA ...

  6. python 实践项目 强密码检测

    需求:写一个函数,它使用正则表达式,确保传入的口令字符串是强口令.强口令的定义是:长度不少于 8 个字符,同时包含大写和小写字符,至少有一位数字.你可能需要用多个正则表达式来测试该字符串,以保证它的强 ...

  7. var

    在函数中,使用var声明的变量,为局部变量,只能在函数内部访问. 不使用var声明的变量,为全局变量,在函数外边也能访问. 没有var的情况 <script type="text/ja ...

  8. JS判断是否有js、css文件的引入方法

    在页面头部有个 <script type="text/javascript" src="abc.js"></script> <li ...

  9. git 包教包会

    # Git全面解析 版本控制工具:VSS.CVS.SVN.Git等,其中Git属于绝对霸主地位. 注意:一般版本控制工具包含两部分 客户端(本地):本地编写内容以及版本记录 服务端(网盘):将内容和版 ...

  10. Mac OS X 恢复 VMware Fusion 虚拟机中的 vmdk 文件

    今天手贱把 VMware Fusion 虚拟机中的 Windows 10 搞挂了,原因是磁盘清理了下,然后重启就蓝屏了,Windows 10 自动修复.手动还原.手动重置系统,试过都不行,恢复系统是没 ...