<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>vue</title>

    <link rel="stylesheet" href="">

    <!--<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>-->

    <script type="text/javascript" src="../js/vue.js"></script>

</head>

<body>

    <div id="vue">

        <div :style="{color:red,fontSize:size+'px'}">测试一</div>

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

        <div :style="div2">测试二</div> <!--可以用div2变量-->

        <div :style="[div2]">测试三</div> <!--也可以写成数组的形式-->

    </div>

</body>

<script type="text/javascript">

    var app = new Vue({

        el: "#vue",

        data:{

            red:"red",

            size:28,

            div2:{

                color:'red',

                background:'yellow',

                width:'30%'

            }

        }

    });

</script>

</html>

效果:

13.VUE学习之控制行内样式的更多相关文章

  1. 黑马vue---17、vue中通过属性绑定绑定style行内样式

    黑马vue---17.vue中通过属性绑定绑定style行内样式 一.总结 一句话总结: 如果属性名中带有短线必须加引号,比如: h1StyleObj: { color: 'red', 'font-s ...

  2. HTML+CSS教程（四）选择器（id选择器，类选择器，标签选择器，子代选择器，后代选择器，组选择器，伪类选择器）/css引入页面的形式（行内样式、内嵌样式、外联样式）

    一.回顾内容 前端的三大组成(三大模块)    HTMl(超文本标记语言) 结构层    css(层叠样式表) 表现层:用来美化HTML结构    JS(Java script)(脚本语言) 行为层: ...

  3. CSS 行内样式 页内样式 外部样式

    行内标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF ...

  4. JS:操作样式表1：行内样式

    //访问元素样式1, stye属性只对行内样式有用 var box = document.getElementById("box"); // alert(box.style.col ...

  5. important覆盖行内样式

    优先级,外部样式<内部样式<行内样式,后台富文本编辑器编辑的正文显示在前台时可用!important覆盖其行内样式 今天的问题,font-family:"思源黑体 CN!impo ...

  6. javascript常用函数封装——运动、cookie、ajax、获取行内样式兼容写法、拖拽

    运动.cookie.ajax.获取行内样式兼容写法.拖拽封装大合集. //url,data,type,timeout,success,error function ajax(options){ //- ...

  7. css的三种使用方式:行内样式,内嵌样式,外部引用样式

    三中的使用方法的简单实例如下: 行内样式: <!doctype html> <html> <head> <meta charset="UTF-8&q ...

  8. JavaScript的DOM_操作行内样式

    一.检测浏览器是否支持css CSS 作为(X)HTML 的辅助,可以增强页面的显示效果.但不是每个浏览器都能支持最新的 CSS 能力.CSS 的能力和 DOM 级别密切相关,所以我们有必要检测当前浏 ...

  9. 原生js去除行内样式

    概述 今天我用js给dom元素设置样式,碰到了一些问题,记下来供以后开发时参考,相信对其他人也有用. 心得 js加上class: $dom.classList.add('some-class'); j ...

随机推荐

  1. Java集合——List集合

    1.集合框架的作用 在实际开发中,我们经常会对一组相同类型的数据进行统一管理操作.到目前为止,我们可以使用数组结构,链表结构,二叉树结构来实现. 数组的最大问题在于数组中的元素个数是固定的,要实现动态 ...

  2. 6 - 编码解码器-一种channelHandler

    6.1 解码器 6.1.1 抽象类-ByteToMessageDecoder decode(ChannelHandlerContext ctx, ByteBuf in, List<Object& ...

  3. PHP笔试题和面试题

    1.不用新变量直接交换现有两个变量的值 (1)list($a,$b)=array($b,$a); (2)a=a+b,b=a-b,a=a-b 2.PHP数字金额转大小格式,同时说明思路 function ...

  4. C#中接口的深入浅出【转】

    C#中接口的深入浅出 假设我们公司有两种程序员:VB程序员,指的是用VB写程序的程序员,用clsVBProgramer这个类表示:Delphi程序员指的是用Delphi写程序的程序员,用clsDelp ...

  5. js中===、==、!=、!===的区别

    结论 ===:先比较两个变量的类型,然后再比较值 !==:上面的值取非 ==:如果变量类型相同,比较值是否相同:类型不同,先转成相同类型,再比较值 !=:上面的值取非 代码 var num = 1; ...

  6. C#与JAVA学习感悟

    C#与JAVA学习感悟 学完C#与JAVA,感觉收获良多.C#与JAVA这两门语言相似度很高(了解它们早期历史的人可能知道为什么),也许很多人在学习JAVA(或C#)时会同时学习C#(或JAVA),因 ...

  7. UICollectionView笔记1

    WWDC 2012 Session笔记——205 Introducing Collection Views 这是博主的WWDC2012笔记系列中的一篇,完整的笔记列表可以参看这里.如果您是首次来到本站 ...

  8. hibernate课程 初探单表映射2-5 session详解（上）

    1 本章目的:获得session的两种方式: openSession 和 getCurrentSession 2 两种session的使用方法 1openSession可以直接写,getCurrent ...

  9. tas5717/5719功放问题点总结

    问题一 AMP output channel invert problem and modification 原因:如果硬件设计时,耳机或者喇叭的输出通道反了,就要对其进行左右对换. 对策:如果通道反 ...

  10. python3基础01（常见语法基础汇总）

    #!/usr/bin/env python# -*- coding:utf-8 -*- # 换行\n 续行\ s[:i] + s[i:] 等于 s#转义 \e 空 \000 八进制 \oyy 十六进制 ...