<!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. (转)linux paste命令用法详解

    linux paste命令用法详解原文:http://www.xfcodes.com/linuxcmd/mulu/10211.htmlinux下paste命令,可用于合并文件的列. 功能说明:合并文件 ...

  2. jQuery-How to Create a Basic Plugin

    官方插件:http://learn.jquery.com/plugins/basic-plugin-creation/ $.extend方法和$.fn.extend方法都可以用来扩展jQuery功能. ...

  3. Day1上

    上午发挥强差人意.心态不好,编译器一直报错,心里比较慌. t1 每一个P枚举底数 .可二分 T2 暴力30  打标60 x^3-y^3=(x-y)*(x^2+xy+y^2). x-y==1.  ! p ...

  4. webpack.config.js====CSS相关：插件optimize-css-assets-webpack-plugin

    1. 安装:主要是用来压缩css文件 cnpm install --save-dev optimize-css-assets-webpack-plugin cssnano 2. webpack.con ...

  5. 生产消费者模式与python+redis实例运用（中级篇）

    上一篇文章介绍了生产消费者模式与python+redis实例运用(基础篇),但是依旧遗留了一个问题,就是如果消费者消费的速度跟不上生产者,依旧会浪费我们大量的时间去等待,这时候我们就可以考虑使用多进程 ...

  6. agc007B - Construct Sequences(构造)

    题意 题目链接 给出一个$1-N$的排列$P$,构造两个数组$a, b$满足 Sol 发现我的水平也就是能做一做0-699的题.... 直接构造两个等差数列$a, b$,公差为$20000$ 然后从小 ...

  7. TAS5508 output changing

    1.如果信号从3th通道输入,正常就是从PWM5,6输出,现在要想从PWM7,8输出,就按照以下红线部分选择DAP CH5和DAP CH6,然后写入相应寄存器产生的12 bytes的数组数据即可.

  8. javascript的常用操作(二)

    Undefined 不是 Null 在 JavaScript 中, null 用于对象, undefined 用于变量,属性和方法. 对象只有被定义才有可能为 null,否则为 undefined. ...

  9. python基础-三元运算和bytes数据

    三元运算       进制 二进制,01 八进制,01234567 十进制,0123456789 十六进制,0123456789ABCDEF   bytes类型 http://www.cnblogs. ...

  10. 第2章 核心C#

    1. 变量 1.1 变量需要遵循的规则: 变量必须初始化 初始化器不能为空 初始化器必须放在表达式中 不能把初始化器设置为一个对象,除非在初始化器中创建了一个新对象 1.2 变量的作用域 只要类在某个 ...