目录

说明

class与style本身是属性指令,但是他们比较特殊,应用更广泛。

# class
:class='变量'
变量可以为:字符串、数组、对象
推荐使用数组,因为class可以使用多个参数
# style
:style='变量'
变量可以为:字符串、数组、对象
推荐使用对象

class

# 先定义几个样式
<style>
.myfont{
font-size: 100px
}
.mycolor{
background-color: deeppink;
}
<!--测试class中的变量的简写-->
.my-color{
color: green;
}
</style>
# 定义示例
<div id="app">
<div :class="my_style">11111111</div>
</div>
# 定义样式
<script>
var vm = new Vue({
el: '#app',
data: {
// 示例中使用的方法,数组
my_style: ['myfont', 'mycolor'],
// 使用字符串
my_style2: 'myfont',
// 使用对象方式,格式为 类名:true/false,类名的引号可以忽略单引号
my_style3: {'myfont': true, 'mycolor2': true},
// 上面的简写
my_style3: {myfont: true, mycolor2: true}
// 上面的简写有一个例外,就是当定义变量时有 - 符号,则不可以简写,如:
my_style3: {myfont: true, mycolor2: true, 'my-color':true} // 这里的 my-color不能简写
},
})
</script>

效果如下:

后期也可以通过数组的一些方法追加或删除一些变量。

style

<div id="app">
<div :style="my_style2">11111111</div>
</div> <script>
var vm = new Vue({
el: '#app',
data: {
my_style: 'color: green; font-size:100px; backg', // 字符串形式
my_style2: [{'color': 'red'}, {'font-size': '100px'}], // 数组形式,不带 - 符号的简写可以省略单引号
// 上面的简写如下,带 - 符号的可以用驼峰体简写
my_style3: [{color: 'red'}, {fontSize: '100px'}], // vm.my_style3[0].color='red'可修改样式
my_style4: {color: 'red', fontSize: '100px'} // 对象的形式写法,建议使用此方法,并且建议使用驼峰,因为可以使用my_style3.fontSize简写
}
})
</script>

属性指令之class和style的更多相关文章

  1. 前端vue之属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、表单控制、v-model进阶

    今日内容概要 属性指令 style和class 条件渲染 列表渲染 事件处理 数据的双向绑定 v-model进阶 购物车案例 内容详细 1.属性指令 <!DOCTYPE html> < ...

  2. Vue之挂载点、变量、事件、js对象、文本指令、过滤器、事件指令和属性指令

    1.vue导入-挂载点 <!DOCTYPE html> <html lang="zh"> <head> <meta charset=&qu ...

  3. Vue框架(一)——Vue导读、Vue实例(挂载点el、数据data、过滤器filters)、Vue指令(文本指令v-text、事件指令v-on、属性指令v-bind、表单指令v-model)

    Vue导读 1.Vue框架 vue是可以独立完成前后端分离式web项目的js框架 三大主流框架之一:Angular.React.Vue vue:结合其他框架优点.轻量级.中文API.数据驱动.双向绑定 ...

  4. 第一章、VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  5. VUE-挂载点-实例成员-数据-过滤器-文本指令-事件指令-属性指令-表单指令-01

    目录 路飞项目 vue vue 导读 vue 的优势 渐进式框架 引入 vue 实例成员 - 挂载点 el js 对象(字典)补充 实例成员 - 数据 data 实例成员 - 过滤器 filters ...

  6. VUE-文本-事件-属性指令

    一.Vue文本指令 文本指令: 1.{{ }} 2.v-text:不能解析html语法的文本,会原样输出 3.v-html:能解析html语法的文本 4.v-once:处理的标签的内容只能被解析一次 ...

  7. 斗篷指令、属性指令、表单指令、条件指令、循环指令、js的Array操作、前台数据库、

    ```python"""1)指令 属性指令:v-bind 表达指令:v-model 条件指令:v-show v-if 循环指令:v-for 斗篷指令:v-cloak 2) ...

  8. vue指令之属性指令

    目录 属性指令 示例 属性指令 标签上的属性可以绑定变量,变量变化,属性也会变化 # 什么是属性?比如: href/src/name/value/class/style... 语法: v-bind:属 ...

  9. Angular 组件与模板 - 属性指令

    指令概览 在 Angular 中有三种类型的指令: 组件 — 拥有模板的指令 结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令 属性型指令 — 改变元素.组件或其它指令的外观和行为 ...

随机推荐

  1. PYTHON常用五大库

    python常用五大库 Numpy Numpy 是python科学计算的基础包,本书大部分内容都基于numpy以及构建于其上的库.其功能有: 快速高效的多维数组对象ndarray 用于对数组执行元素级 ...

  2. 2月28日Android开发学习

    界面显示与逻辑处理 Android Studio利用XML标记描绘应用界面,使用java代码书写程序逻辑. 把App界面设计与代码逻辑分开的好处 使用XML文件描述App界面,可以很方便地在Adroi ...

  3. 高德地图使用websocket后重新设置点进行优化

    // 设置第一次点赋值,重新定义一个新数组,将设备号为对象名,索引值作为键值 const getListNEW = useCallback( (params, reload, gps) => { ...

  4. C#发送字符串转字节含空格与0x需删去

    主要作用:清除发送字符串转字节中的空格和16进制前缀0x, 字节转换按两位字符转换为一个字节,多余一位按一位字符转换一个字节 //清除空格和16进制前缀发送 String sendstr;// = n ...

  5. C语言II—作业03

    1.作业头 这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-3 这个作业要求在哪里 https://edu.cnblogs.com/cam ...

  6. idea项目编译时报错:程序包XXX不存在

    问题如下: 解决方法: 点击File-->点击settings-->点击maven-->点击Runner-->勾选Delegate IDE build/run action t ...

  7. 记一次自定义管理工厂使用spring自动装载bean

    1.核心工厂配置类 @Componentpublic class HandlerContext { private Map<String, AbstractHandler> handler ...

  8. Centos 8 部署harbor 访问502

    部署过程不做多说, 部署完之后访问502, 以下可能只是一种情况, 有可能是其它情况导致的503 查看日志 core.log 提示访问数据库被拒绝 贴出解决方案:https://github.com/ ...

  9. 全局配置-tabBar

  10. vue input有值但还是验证不通过

    验证失败原因: 因为input自动把输入的值转换为string类型,导致验证失败. 解决方案: 一. Input中的v-model改为v-model.number: 二.rules里面需要加type: ...