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. Java 面向对象之构造方法

    01构造方法引入 A:构造方法的引入 在开发中经常需要在创建对象的同时明确对象的属性值,比如员工入职公司就要明确他的姓名.年龄等属性信息. 那么,创建对象就要明确属性值,那怎么解决呢?也就是在创建对象 ...

  2. mui框架（二）

    1.底部导航切换界面 HTML部分: <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" ...

  3. Scrum Meeting NO.5

    Scrum Meeting No.5 1.会议内容 暂时料理完了编译,可以写软工了.说多了都是泪T_T 2.任务清单 徐越 序号 近期的任务 进行中 已完成 1 修改url名.参数 √ 2 学习Jso ...

  4. 2-Eleventh Scrum Meeting20151211

    第二阶段任务分工整理会议 1.会议任务: (1)明晰第二阶段的开发内容,统计未完成的功能留需完善开发. (2)安排任务分工,每个人的工作安排. (3)PM职位担任. (4)博客内容负责. 2.会议记录 ...

  5. 什么是GPS的冷启动、温启动和热启动？

    对于GPS多种启动方式的概念还很模糊,冷启动.热启动.温启动各种专业术语铺天盖地,使得许多用户眼花缭乱. 我们简单从定义上了解一下几种GPS启动的方式,GPS开机启动分为冷启动.温启动.热启动三种. ...

  6. ElasticSearch 2 (18) - 深入搜索系列之控制相关度

    ElasticSearch 2 (18) - 深入搜索系列之控制相关度 摘要 处理结构化数据(比如:时间.数字.字符串.枚举)的数据库只需要检查一个文档(或行,在关系数据库)是否与查询匹配. 布尔是/ ...

  7. 评论beta发布

    1. 组名:飞天小女警 项目名:礼物挑选小工具 评价:该系统可以通过选择所要接礼的人的性别.年龄和与送礼者的关系及所要送礼的价值,就可以推荐出所送的礼物.还可以通过男/女所选的Top前10进行简单推荐 ...

  8. [Asp.net MVC]Asp.net MVC5系列——布局视图

    目录 系列文章 概述 布局视图 系列文章 [Asp.net MVC]Asp.net MVC5系列——第一个项目 [Asp.net MVC]Asp.net MVC5系列——添加视图 [Asp.net M ...

  9. 解决Ubuntu14.04下sublime无法输入中文

    原帖地址: (简书作者) http://www.jianshu.com/p/bf05fb3a4709 前言 sublime很好用,但是ubuntu14.04 下不能输入中文,这是一个很大的问题.不知道 ...

  10. Xml文档添加节点和属性

    XmlDocument doc = new XmlDocument(); XmlElement xmlElement = doc.CreateElement("节点名称"); xm ...