data () {

    return {

        img: require('你的json资源路径')

    }

}

:style="{backgroundImage: 'url(' + img + ')'}"

Vue 的style绑定显示background-image的更多相关文章

  1. Vue中class与style绑定

    gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07 一 用对象的方法绑定class 很简单,举个栗子: <!D ...

  2. [js高手之路] vue系列教程 - 绑定class与行间样式style(6)

    一.绑定class属性的方式 1.通过数组的方式,为元素绑定多个class <style> .red { color:red; /*color:#ff8800;*/ } .bg { bac ...

  3. vue class与style绑定、条件渲染、列表渲染

    列表渲染 根据我例子的需要,先来说下,列表渲染使用到的是v-for指令,需要使用 item in items 形式的特殊语法,items 是源数据数组并且 item 是数组元素迭代的别名,具体使用方法 ...

  4. vue学习笔记(三)class和style绑定

    前言 通过上一章的学习vue学习笔记(二)vue的生命周期和钩子函数,我们已经更近一步的知道了关于vue的一些知识,本篇博客将进一步探讨vue其它方面的内容,vue中关于class和style绑定,关 ...

  5. 【Vue】Vue框架常用知识点 Vue的模板语法、计算属性与侦听器、条件渲染、列表渲染、Class与Style绑定介绍与基本的用法

    Vue框架常用知识点 文章目录 Vue框架常用知识点 知识点解释 第一个vue应用 模板语法 计算属性与侦听器 条件渲染.列表渲染.Class与Style绑定 知识点解释 vue框架知识体系 [1]基 ...

  6. 关于vue.js中class与style绑定的学习

    练习代码: html: <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  7. Vue#Class 与 Style 绑定

    绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class=&q ...

  8. Vue.2.0.5-Class 与 Style 绑定

    Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼 ...

  9. Vue学习4：class与style绑定

    说明:有些部分我只是相当于做一个学习笔记,加强记忆之用.所以可能阅读性不是那么强.如果有参考我这类博客的人,那么请见谅. 代码如下: <!DOCTYPE html> <html la ...

随机推荐

  1. 【CSAPP笔记】9. 汇编语言——缓冲区溢出

    x86-64 Linux 内存结构 先来看看一个程序在内存中是如何组织的.Linux 为每个进程维持了一段单独的虚拟地址空间.(进程是计算机科学中很深刻.很成功的一个概念.当我们在运行一个程序时,会得 ...

  2. STL的集合set

    集合: 集合是由元素组成的一个类,其成员可以是一个集合,也可以是一个原子,通常一个元素在一个集合中不能多次出现:由于对实现集合不是很理解,只简单写下已有的STL中的set集合使用: C++中set基本 ...

  3. Java 多生产者消费者问题

    /* 生产者,消费者.   多生产者,多消费者的问题. if判断标记,只有一次,会导致不该运行的线程运行了.出现了数据错误的情况. while判断标记,解决了线程获取执行权后,是否要运行!   not ...

  4. es6 ...展开运算符

    展开运算符,目前应用在数组上,对象展开运算符,将在es7 提案 1.两个对象连接返回新的对象   let a = {aa:'aa'} let b = {bb:'bb'} let c = {...a,. ...

  5. 搭建zabbix详细步骤

    关闭selinux和防火墙 selinux关闭: 1 命令查看出selinux的状态sestatus -v2 临时关闭 selinuxsetenforce 03 永久关闭selinuxvi /etc/ ...

  6. oracle 取俩个字符串的差集

    思路: --funcation RemoveSameStr(in_str,splitStr) ;用于去除重复值 ; SELECT b.memberid, RemoveSameStr(wm_concat ...

  7. Struts hibernate Spring 框架原理

    转自:http://www.cnblogs.com/javaNewegg/archive/2011/08/28/2156521.html 原理:1.通过Configuration().configur ...

  8. 为什么Xmind输入小写的英文自动变成大写了

  9. GCC 提供的原子操作

    gcc从4.1.2提供了__sync_*系列的built-in函数,用于提供加减和逻辑运算的原子操作. 其声明如下: type __sync_fetch_and_add (type *ptr, typ ...

  10. [Offer收割]编程练习赛23-freeloop

    A. H国的身份证号码I dfs裸题. 时间复杂度\(O(n^k)\). #include <bits/stdc++.h> #define FOR(i,a,b) for (int i=a; ...