1.对象语法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>无标题文档</title>

</head>

<body>

    <!--<div id="box" :style="{color:activeColor, font-size:size}">用短横分隔是会报错</div>-->

    <div id="box" :style="{color:activeColor, fontSize:size, textShadow:shadow}">没有短横分隔不报错</div>

    <div id="box2" :style="styleObject">工作睡觉吃饭</div>

</body>

</html>

<script type="text/javascript">

    // v-bind:style 的对象语法十分直观--非常像CSS，其实它是一个Javascript对象，CSS属性名必须用驼峰命名法（官方文档写的是既可以用驼峰也可以用 短横分隔命名法），但是用短横分隔是会报错的

    var vm= new Vue({

        el:'#box',

        data:{

            activeColor:'#f00',

            size:'30px',

            shadow:'5px 2px 6px #000'

        }

    })

    var vm= new Vue({

        el:'#box2',

        data:{

            styleObject:{

                color:'red',

                fontSize:'30px'

            }

        }

    })

</script>

效果图

2.数组语法

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>无标题文档</title>

</head>

<body>

    <div class="box" :style="[styleObjectA, styleObjectB]">好好学习，天天向上</div>

</body>

</html>

<script type="text/javascript">

    // 可将多个样式对象应用到一个元素上

    var vm2= new Vue({

        el:'.box',

        data:{

            styleObjectA:{

                fontSize:'36px',

                color:'blue'

            },

            styleObjectB:{

                textDecoration:'underline'

            }

        }

    })

</script>

效果图：

3.添加图片src地址

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!--引入Vue.js-->

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>

<title>无标题文档</title>

</head>

<body>

    <!--

    下面这种写法不会显示图片，会报错，推荐第二种写法

    <img class="box" src="{{url}}" >

    -->

    <img class="box" :src="url" >

</body>

</html>

<script type="text/javascript">

    var vm= new Vue({

        el:'.box',

        data:{

            url:'https://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201809/12/005629z489rqqeeyle7gje.jpg.thumb.jpg'

            }

        })

</script>

效果图：

Vue.js绑定内联样式的更多相关文章

  1. Vue.js style(内联样式)

    Vue.js style(内联样式) 我们可以在 v-bind:style 直接设置样式: <div id="app"> <div v-bind:style=&q ...

  2. vue.js中内联样式style三元表达式

    <span v-bind:style="{'display':config.isHaveSearch ? 'block':'none'}" >搜索</span&g ...

  3. JS获取内联样式

    JS获取内联样式 //获取内联样式 function getCss(obj,attr){//obj:对象,name:style属性 if(obj.currentStyle) { return obj. ...

  4. vue绑定内联样式

    v-bind:style 的对象语法十分直观--看着非常像 CSS ,其实它是一个 JavaScript 对象. CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case) ...

  5. vue 绑定 class 和 内联样式（style）

    <div id="app31"> <!--多个属性 ,号隔开--> <!-- v-bind:style="{fontSize: fontSi ...

  6. Vue 内联样式

    前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...

  7. Vue 内联样式的数据绑定

    Vue 内联样式的数据绑定 之前学的是数据绑定 class,现在可以将数据绑定到 style 中. <div id="app"> <div v-bind:styl ...

  8. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  9. 内联样式自动出现，一般是js控制写入的

    内联样式自动出现,一般是js控制写入的

随机推荐

  1. A - 摆仙果

    题目描述 Adrian, Bruno与Goran三人参加了仙界的宴会,宴会开始之前先准备了一些仙果供三人品尝,但是仙果的摆放有顺序要求,如果把仙果摆错了位置,仙果就会消失而无法品尝到. 由于三人是第一 ...

  2. 微软职位内部推荐-SW Engineer II for WinCE

    微软近期Open的职位: Do you have a passion for embedded devices and services? &nbsp Does the following m ...

  3. PAT甲题题解-1013. Battle Over Cities (25)-求联通分支个数

    题目就是求联通分支个数删除一个点,剩下联通分支个数为cnt,那么需要建立cnt-1边才能把这cnt个联通分支个数求出来怎么求联通分支个数呢可以用并查集,但并查集的话复杂度是O(m*logn*k)我这里 ...

  4. Python中元组，列表，字典的区别

    http://blog.csdn.net/yasi_xi/article/details/38384047

  5. Daily Scrumming* 2015.12.11（Day 3）

    一.团队scrum meeting照片 二.今日总结 姓名 WorkItem ID 工作内容 签入链接以及备注说明  江昊 任务945 学习使用sass,学习的主要难点在于ruby环境的搭建.sass ...

  6. Python的数据结构

    目录 Python内置的数据结构 序列Sequence 映射Mapping 集合Sets Python内置的数据结构 Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python内置的 ...

  7. quartz.net 3.x版本如何通过xml文件进行Job配置

    在2.x版本中,我们可以简单的在quartz.config文件中通过以下Xml配置方式来注册相应的Job以及触发器 quartz.plugin.xml.type = Quartz.Plugin.Xml ...

  8. python 实现二叉树的深度 & 广度优先遍历

    什么是树 在计算器科学中,树(英语:tree)是一种抽象数据类型(ADT)或是实现这种抽象数据类型的数据结构,用来模拟具有树状结构性质的数据集合.它是由n(n>0)个有限节点组成一个具有层次关系 ...

  9. javaee, javaweb和javase的区别以及各自的知识体系

    javaee, javaweb和javase的区别以及各自的知识体系 来源 https://blog.csdn.net/weixin_39297312/article/details/79454642 ...

  10. STEM 是个怎样高大上的东西？

    近几年来,STEM 教育概念传入中国,并且越来越多地成为家长及教育机构关注的焦点. STEM教育概念同时成为了各大小教育机构及公司宣传造势的赚钱工具,可家长.学生.老师们真的理解究竟何为 STEM/S ...