博主信息
 一纸荒凉* Armani
博文
118
粉丝
4
评论
5
访问量
39091
积分:0
P豆:302
博文分类
html3篇
CSS11篇
JavaScript16篇
jQuery2篇
Vue11篇
PHP20篇
ThinkPHP32篇
React0篇
other4篇
Laravel17篇
小程序5篇

03-Vue_样式设置

2021年05月05日 15:24:21阅读数:216博客 /  一纸荒凉* Armani/ Vue

在Vue中使用样式

使用class样式

  1. .red{
  2. color: red;
  3. }
  4. .thin{
  5. font-weight:200;
  6. }
  7. .italic{
  8. font-style: italic;
  9. }
  10. .active{
  11. letter-spacing: 0.5em;
  12. word-spacing: 0.5em;
  13. }

1. 数组数组方式

class 需要使用 v-bind 做数据绑定

  1. <h1 :class="['red', 'thin']">{{msg}}</h1>

2. 数组中使用三元表达式

  1. <h1 :class="['red', 'thin', isactive?'active':'']">{{msg}}</h1>

3. 数组中嵌套对象

  1. <h1 :class="['red', 'thin', {'active': isactive}]">{{msg}}</h1>

4. 直接使用对象

  1. <h1 :class="{red:true, italic:true, active:false, thin:true}">{{msg}}</h1>
  2. <h1 :class="classObj">{{msg}}</h1>

Vue 实例对象

  1. const vm = new Vue({
  2. el: "#app",
  3. data: {
  4. msg: '这是一个大标题!',
  5. isactive: false,
  6. classObj: {red:true, italic:true, active:false, thin:true},
  7. },
  8. });

使用内联样式style

1. 直接在元素上通过 :style 的形式,书写样式对象

  1. <h1 :style="{color: 'red', 'font-size': '40px'}">这是一个善良的H1</h1>

2. 将样式对象,定义到 data 中,并直接引用到 :style

  • 在data上定义样式:
  1. const vm = new Vue({
  2. el: "#app",
  3. data: {
  4. h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' }
  5. },
  6. });
  • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
  1. <h1 :style="h1StyleObj">这是一个善良的H1</h1>

3. 在 :style 中通过数组,引用多个 data 上的样式对象

  • 在data上定义样式:
  1. const vm = new Vue({
  2. el: "#app",
  3. data: {
  4. h1StyleObj: { color: 'red', 'font-size': '40px', 'font-weight': '200' },
  5. h1StyleObj2: { fontStyle: 'italic' }
  6. },
  7. });
  • 在元素中,通过属性绑定的形式,将样式对象应用到元素中:
  1. <h1 :style="[h1StyleObj, h1StyleObj2]">这是一个善良的H1</h1>

版权申明:本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!

全部评论

文明上网理性发言,请遵守新闻评论服务协议

条评论
  • jquery中可使用css()方法来css
    css中可以使用font-style属性来斜体,只需要给文本元素“font-style:italic;”或者“font-style:oblique;”即可;值“italic”代表斜体
    cad点的方法:首先依次点击格;然后选择点的并选择的点的大小;最后选择按绝对单位大小即可。
    htmlstyle的方法:1、直接将写在元素标签的style属性中,语法“<element style="代码">”;2、在head部分的style标签中
    CSStable的方法:首先创建一个HTML示例文件;然后通过table标签创建一个表格;最后通过给表格添加“background-color”等属性来table即可。
    在css中我们可以通过伪类来超链接的,例如我们要未访问的超链接,代码如【a:link {color: #FF0000;}】,已访问的链接,代码如【a:visited {color
    cad点方法:首先点击【绘图】选项,并点击【点】选项;然后点击CAD界面上方的【格】选项,并点击【点】选项;最后选择一个点的,点击【确定】即可。
    表格边框的方法:1、给table元素添加“border:边框宽度 边框 边框颜色”,可给整个表格边框;2、给td元素添加“border:边框宽度 边框 边框颜色”,可给每个单元格边框
    css字体倾斜的方法,可以利用font-style属性来进行,如【font-style:oblique;】。font-style属性指定文本的字体,属性值oblique指定倾斜
    属性的方法:使用attr(),语法“attr(属性,值)”。
    css字体的方法:1、使用【font-family】字体类型;2、使用【font-size】字体大小;3、使用【font-variant】字母是否转大写。
    cssli的方法:1、通过list-style-type属性定义li列表的项目符号;2、通过list-style-image属性实现使用图片代替项目符号;3、通过list-style属性综合
    在css中,可以使用border-style属性来边框为虚线,只需要给元素添加“border-style:dashed;”即可。
    cad点方法:首先点击【绘图】,并点击【点】选项;然后点击【格】选项,并点击【点】选项;接着选择一个点的,点击【确定】保存;最后可调整点的大小,点击【确定】保存
    uniapp动态的方法:1、用户点击按钮后动态切换按钮选中;2、给标签渲染多种颜色,代码为【.signstyle-0{color: #3ac9e3;border: 1px solid #3ac9e3
    css黑体的方法:可以利用font-family属性来进行,如【font-family: 黑体;】。font-family属性用于指定一个元素的字体。
    css字体加粗的方法:首先创建一个HTML示例文件;然后在body中定义一些文字内容;最后通过“font-weight:bold;”或“font-weight:bolder;”属性字体加粗即可
    excel形状在菜单栏中,其具体方法是:首先打开Excel并新建一个文档;然后点击菜单栏中的“插入”命令,并插入一个形状;最后点击菜单栏中的“形状格”并选择喜欢的即可。
    方法:1、使用border-style属性,可通过不同的属性值来不同的边框线,例“dotted”点状,“solid”实线,“double”双线;2、使用border-image属性,为边框添加不同的背景图片来不同的边框线
    CAD标注的方法:首先点击“格-标注”,点击“修改”;然后在修改标注界面,点击“线”可修改尺寸线的线宽等;最后在符号和箭头项,可修改标记箭头类型、大小等。