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. 01_python2.x和python3.x中range()的区别

    Py2.x 1) .range 和xrange都是经常使用的,特别是range()返回一个列表 2) .xrange()一般用来创建迭代对象 Py3.x xrange()不存在了,只有range()而 ...

  2. Python爬虫爬中文却显示Unicode，怎样显示中文--问题解答

    首先爬取古诗网站时,显示 原因是因为输出为列表[] 如果写一个循环,输出其中每个元素就为中文了...

  3. A总结

    Alpha 答辩总结 评审表 组名 格式 内容 ppt 演讲 答辩 总计 天机组 15 15 14 15 14 73 PMS 16 16 15 15 16 78 日不落战队 16 16 16 15 1 ...

  4. 微信小程序对接串口摄像头

    串口摄像头由树莓派控制,代码如下: # _*_ coding:utf-8 import serial import time import traceback import pycurl import ...

  5. Redis分布式锁的实现

    前段时间,我在的项目组准备做一个类似美团外卖的拼手气红包[第X个领取的人红包最大],基本功能实现后,就要考虑这一操作在短时间内多个用户争抢同一资源的并发问题了,类似于很多应用如淘宝.京东的秒杀活动场景 ...

  6. Hibernate性能优化之EHCache缓存

    像Hibernate这种ORM框架,相较于JDBC操作,需要有更复杂的机制来实现映射.对象状态管理等,因此在性能和效率上有一定的损耗. 在保证避免映射产生低效的SQL操作外,缓存是提升Hibernat ...

  7. code first 如何创建索引字段

    比较简单的办法: protected override void Seed(Context context) { CreateIndex(context, "ProductName" ...

  8. Java基础整理之字节、数组、字符串、面向对象

    一.字节(8个)8bit = 1B或1byte1024B = 1Kb 二.强制类型转换顺序及其大小顺序遵循向上转换的规则byte,short,char -> int -> long -&g ...

  9. [Swerc2014 C]Golf Bot

    题意:给你N个数字,每次利用这N个数字中最多两个数字进行加法运算,来得到目标中的M个数字. Solution: 我们先来看看多项式乘法:\(A(x)=\sum_{i=0}^{n-1}a_ix^i\), ...

  10. 【题解】 [ZJOI2007]矩阵游戏 （二分图匹配）

    原题目戳我 Solution: 这个二分图藏还是挺深的,重点在哪里呢?首先我们分析下,交换影响的会是哪里. 每一次交换只会影响某一行上的排列或者某一列上的排列,如果有矩阵是下面这样,就一定不会互相影响 ...