一共用到了两种方式:

第一种:对象

第二种:数组

看代码:

<!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. 第05组 Alpha冲刺（3/4）

    第05组 Alpha冲刺(3/4) 队名:天码行空 组长博客连接 作业博客连接 团队燃尽图(共享): GitHub当日代码/文档签入记录展示(共享): 组员情况: 组员1:卢欢(组长) 过去两天完成了 ...

  2. npm install 提示 `gyp: No Xcode or CLT version detected!` MacOS 10.15

    https://github.com/nodejs/node-gyp/issues/569 https://github.com/nodejs/node-gyp/issues/1927 解决链接:ht ...

  3. python集合、元组、字典

    主要内容: 2.集合 3.元组 4.字典 复习: 字符串和元组一样,只能读不能写.列表和字典可以嵌套任何东西,列表可以嵌套列表 L = list("hello")  # L = [ ...

  4. CentOS7下rsync服务端与Windows下cwRsync客户端实现数据同步配置方法

    最近需求想定期备份服务器d盘的数据到Linux服务器上面,做个笔记顺便写下遇到的问题 以前整过一个win下的cwrsync(客户端)+rsync(服务端:存储)的bat脚本 和整过一个Linux下的r ...

  5. LeetCode | 2 的幂

    LeetCode 题库的第 231 题 —— 2 的幂 这题也是比较容易的一题,前提是找到规律即可.如果从 10 进制的角度观察 2 的幂次方,可能并不容易发现规律,那么可以从 2 进制的角度进行观察 ...

  6. 使用JaCoCo Maven插件创建代码覆盖率报告

    这篇博客文章描述了我们如何使用JaCoCo Maven插件为单元和集成测试创建代码覆盖率报告. 我们的构建要求如下: 运行测试时,我们的构建必须为单元测试和集成测试创建代码覆盖率报告. 代码覆盖率报告 ...

  7. oracle学习笔记（十三） 查询练习（三） 子查询查询

    子查询练习 create table empployee_demo( empno number(4) not null primary key, --员工编号,主键 ename varchar2(10 ...

  8. 练手WPF（三）——扫雷小游戏的简易实现（上）

    一.创建项目1.创建WPF项目,设置初始化窗口大小(初级难度):高x宽为430x350.2.添加文件夹Images,并添加相关图片. 3.xaml中引入图片资源. <Window.Resourc ...

  9. vue-render渲染

    在页面中基本的渲染页面 这里的p标签会显示 <div id="app"> <p>33333</p> <login></logi ...

  10. Set a One-to-Many Relationship设置一对多关系 （XPO）

    In this lesson, you will learn how to set a one-to-many relationship between business objects. The C ...