vue-03-style与class
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的更多相关文章
- 练习vue(class,style属性)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- 深入理解VUE样式style层次分析
刚开始使用vue的时候容易被里面的样式搞懵: 样式可以在main.js中引入,在模块js文件中引入,在组件中的style标签引入,在组件中的script标签引入,还可以在index.html的body ...
- 013——VUE中多种方式使用VUE控制style样式属性
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- Vue.js style(内联样式)
Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...
- Vue 03
目录 组件 组件的分类 组件的特点 组件的使用 组件传参-父传子 组件传参-子传父 组件 组件就是html, css和js文件的集合体, 实现对代码的复用, 组件就是vue对象 组件的分类 根组件 & ...
- Vue 设置style样式
1.直接添加行内样式 2.通过绑定设置style样式 3.将vue的属性设置为样式 4将多个vue属性设置为样式 <div id="box"> <!--直接添加样 ...
- Vue 设置style属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中style下scope的使用和坑
在vue组件中,为了使样式私有化(模块化),不对全局造成污染,可以在style标签上添加scoped属性以表示它的只属于当下的模块,这是一个非常好的举措,但是为什么要慎用呢?因为在我们需要修改公共组件 ...
- VUE中 style scoped 修改原有样式
作用域CSS 当<style>标记具有该scoped属性时,其CSS将仅应用于当前组件的元素.这类似于Shadow DOM中的样式封装.它有一些警告,但不需要任何polyfill.通过使用 ...
- Vue 的style绑定显示background-image
data () { return { img: require('你的json资源路径') } } :style="{backgroundImage: 'url(' + img + ')'} ...
随机推荐
- linux下apt安装mysql导致mysql.user table is damaged
笔者在ubuntu下用 apt install mysql-server类似的命令安装mysql, 安装了最新版的mysql5.7,覆盖了操作系统内置的数据库mysql系统库. 最初启动mysql出错 ...
- python爬虫之urllib
#coding=utf-8 #urllib操作类 import time import urllib.request import urllib.parse from urllib.error imp ...
- C# Chart控件教程
一.什么是Micosoft.Chart.Controls Micosoft.Chart.Controls是微软自带的一个图形可视化的组件,可以在Web程序和窗体程序中(Windowsform)中使用. ...
- 编译UNITY的MONO模块记录
起因 接收到一个UNITY文件处理的任务(c#逻辑代码存放的Assembly-CSharp.dll可热更等需求) 需要重新编译UNITY的mono模块 用于安卓环境下对DLL的定制处理 上网查阅了一些 ...
- Spring Boot学习笔记:整合H2数据库
H2数据库:java语言编写的嵌入式sql数据库.可以和应用一起打包发布. H2有三种连接模式(Connection Modes): Embedded mode (local connections ...
- explain 类型分析
all 全表扫描 ☆ index 索引全扫描 ☆☆ range 索引范围扫描,常用语<,<=,>=,between等操作 ☆☆☆ ref 使用非唯一索引扫描或唯一索引前缀扫描,返回单 ...
- s3 Docker的镜像和容器
Docker技术里最为基础的两大概念:镜像和容器.镜像的 获取方式:从registry拉取,从Dockerfile构建:容器的基本操作 1 Docker架构和底层技术简介 Docker Platfor ...
- 【慕课网实战】Spark Streaming实时流处理项目实战笔记十四之铭文升级版
铭文一级: 第11章 Spark Streaming整合Flume&Kafka打造通用流处理基础 streaming.conf agent1.sources=avro-sourceagent1 ...
- jenkins+donet core持续集成环境搭建
一.Jenins+GitHub 参考 另外需要配置Global Tool Configuration 如果没有安装git,需下载安装,下载地址 二.jenkins发布donet core应用 1.配置 ...
- accept:Invalid Argument
错误 #include <sys/types.h> /* See NOTES */ #include <sys/socket.h> int accept(int sockfd, ...