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. LintCode——第K大元素

    第K大元素:在数组num中找到第k大的元素(可以交换数组中的元素的位置) 样例: 数组 [9,3,2,4,8],第三大的元素是 4 数组 [1,2,3,4,5],第一大的元素是 5,第二大的元素是 4 ...

  2. java锁经典示例——卖车票场景

    场景:20张车票 3个窗口同时售票 1.不加锁 package com.yao.lock; /** * 不加锁的情况 */ public class Runnable_demo implements ...

  3. linux第一次实验报告

    http://wwwcnblogs.com/20135228guoyao/4964477.html

  4. CentOS下面磁盘扩容处理

    1. 给虚拟机增加一块硬盘: 过程不表 2. 增加了硬盘之后需要重启一下 查看磁盘 ls /dev/sd* 3. 使用  gdisk 处理磁盘 注意 这里面fdisk 貌似没法处理成 LVM 必须使用 ...

  5. Jquery ajax 完整实例子1

    $ajax请求--------------------------------- var $personWifePs=$("#wife-money tbody tr"); var ...

  6. SpringBoot 6.SpringBoot使用 Log4j2 实现日志输出

    一.添加 Log4j2 的依赖 <!-- 引入 log4j2 必须排除 logging --> <dependency> <groupId>org.springfr ...

  7. psql -- PostgreSQL 交互终端

    psql --  PostgreSQL 交互终端 用法:psql [option...] [dbname [username]] 描述:psql 是一个以终端为基础的 PostgreSQL 前端.它允 ...

  8. Mysql学习实践---SELECT INTO的替代方案

    从一个表复制数据,然后把数据插入到另一个新表中. 假设有一个已创建且有数据的orders表,要把orders表备份到还未创建的newOrders表里 SQL用法:SELECT * INTO newOr ...

  9. aop 例外通知就是记录业务方法出现错误 并保存到日志里面的功能

    aop 例外通知就是记录业务方法出现错误 并保存到日志里面的功能

  10. Eclipse 使用 VS快捷键

    这里楼主也是尝试了,只能说一般吧.还是有许多没有改过来... 想要尝试的朋友,可以试试. 首先进入Eclipse 然后 接着 Name:CDT Location:http://download.ecl ...