一共用到了两种方式:

第一种:对象

第二种:数组

看代码:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>vue.js 多种方式控制class属性 </title>

    <script src="vue.js"></script>

    <script src="node_modules/axios/dist/axios.js"></script>

    <script src="node_modules/lodash/lodash.js"></script>

</head>

<body>

<div id="ask"><!--vue不能控制body和html的标签-->

    <h1 :style="{color:red,fontSize:size+'px'}">简单记录</h1>

    <input type="text" v-model="size">

    <h1 :style="style">简单记录</h1>

    <h1 :style="[mykeji]">简单记录</h1>

</div>

<script>

    var app = new Vue({ //实例化vue

        el:'#ask',//vue控制id为ask的元素,

        data:{

            red:'green',

            size:16,

            style:{

                color:'blue',

                fontSize:'200px'

            },

            mykeji:{

                color:'red',

                fontSize:'100px'

            }

        },

    });

</script>

</body>

</html>

vue 多种方式控制style属性的更多相关文章

  1. Spring实现Ioc的多种方式--控制反转、依赖注入、xml配置的方式实现IoC、对象作用域

    Spring实现Ioc的多种方式 一.IoC基础 1.1.概念: 1.IoC 控制反转(Inversion of Control) IoC是一种设计思想. 2.DI 依赖注入 依赖注入是实现IoC的一 ...

  2. Vue基础知识之常用属性和事件修饰符（二）

    Vue中的常用选项 1.计算属性 computed为可以计算的属性,由get方法和set方法组成,默认调用的是get方法.里面的 计算属性简单来说,就是根据数据推算出来的值,当给这个值赋值时可以影响其 ...

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

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

  4. Vue通信、传值的多种方式，详解

    Vue通信.传值的多种方式,详解 转自:https://blog.csdn.net/qq_35430000/article/details/79291287 一.通过路由带参数进行传值 ①两个组件 A ...

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

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

  6. 【jQuery】总结:筛选器、控制隐藏、操作元素style属性

    筛选器 -> http://blog.csdn.net/lijinwei112/article/details/6938134 常用到的: $("tr[id=ac_"+id+ ...

  7. JS-DOM ～ 03. 子节点的操作、style.样式和属性、dom元素的创建方法及操作、14个例题、主要是利用js直接控制html属性

    带有Element和不带的区别 a)  带Element的获取的是元素节点 b)  不带可能获取文本节点和属性节点 获取所以子节点 a)   . childNodes b)   . children ...

  8. Vue通信、传值的多种方式，详解（都是干货）

    Vue通信.传值的多种方式,详解(都是干货) 可参考博客: https://blog.csdn.net/qq_35430000/article/details/79291287

  9. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

随机推荐

  1. C++教程详解

    第一篇:基础篇 简介.环境配置.基本语法.注释.数据类型.变量类型.变量作用域.常量.修饰符类型. 存储类.运算符.循环.判断.函数.数字.数组.字符串.指针.引用.日期&时间. 基本的输入输 ...

  2. flag 履行我的flag

    以后数组开小就不吃饭!!!!!! 上午考试不吃午饭 下午考试不吃晚饭 晚上考试不吃早饭 我以后还能吃饭吗 11.12距离csp-s还有2天,我的数组开小了,履行承诺,不吃饭了

  3. Java开发笔记汇总

    Java语法与.Net对比 Java规范与约定 Kotlin Maven笔记 SpringBoot笔记2 SpringCloud笔记 MyBatis笔记 发布Jar包到中央仓库

  4. TCP协议 - 可靠性

    在前篇文章中介绍了TCP协议的三大特性,其中可靠性是依赖一系列的机制,如:校验和,分组发送,超时重传,流量控制得到保证. 一.数据交互 TCP在交互数据时,采用多种机制保证可靠性,同时也保证TCP的性 ...

  5. java war包 路径--解决war包中文件路径问题

    https://blog.csdn.net/u013409283/article/details/51480948 转自:http://free-chenwei.iteye.com/blog/1507 ...

  6. three.js实现世界3d地图

    概况如下: 1.THREE.Shape绘制世界地图平面地图: 2.THREE.ExtrudeGeometry将绘制的平面沿着Z轴拉伸,实现3d效果: 效果图如下: 预览地址:three.js实现世界3 ...

  7. Zabbix 数据清理

    目录 Zabbix 数据清理的一系列操作 一.问题 二.解决办法 Zabbix 数据清理的一系列操作 基本信息: Zabbix 版本 4.0.9 MySQL 版本 5.5 一.问题 我们将 Zabbi ...

  8. c# Winform 加载窗体

    先来一个加载窗体代码 public partial class FrmLoading : Form { public BackgroundWorker updateDBWorker=new Backg ...

  9. 湖南省web应用软件（中慧杯）

    湖南省web应用软件 写这篇博客已经是比完赛的第四天了,我还记得那天下着小雨.我们早早的到了比赛的现场抽检机器,在比赛前一天我很是激动.我还记得我们从学校,去株洲的时候我们的领导来给我加油,特别是我的 ...

  10. go-运算符

    算术运算符 ++,--只能放在变量后面,不能放在前面 独立使用 目的:更简洁 go语言不支持三元运算符 键盘输入 fmt.scanln 会在换行时扫描,所以最后一个条目必须换行或达到结束位置 fmt. ...