vue绑定背景颜色或背景图片 和 nuxtjs动态设置background-image:

v-bind绑定样式表:
----------------------------------------------------------------------------------------------------

HTML写法:
<div class="myItem" style="text-align:center; background-image:url(''); background-size:auto 100% ;background-position:center; background-repeat:no-repeat;" >

v-bind绑定style写法(里面是个json): 
<div class="myItem" :index="index"  :style="{'text-align':'center','background-image':'url('+item.photo+')','background-size':'auto 100%','background-position':'center','background-repeat':'no-repeat'}"  >

<div class="box" :style="{width:width,height:height,backgroundColor:backgroundColor}"></div>

nuxtjs动态设置background-image

  <div :style="{backgroundImage: `url(` + require(`~/assets/ProjectPictures/${this.background}`) + `)`}">

nuxt绑定内联样式 :style="{'title':'里面必须标准的json'}"   里面必须是标准的json格式否则出错
--------------------------------------------------------------------------  
    <div style="float:left;width:27.18%;height:14.2vw; border:1px solid #ccc;background-size:100% 100%;"  :style="{'background-image':'url(\''+require('@/assets/images/index/advantage1.png')+'\')'}"  >
        <nuxt-link to="/freeCoupons" style="display: flex; margin:9vw 2vw auto auto; align-items:center; width: 20vw;border:0px solid #ccc;color:#999;font-size: 10pt;font-weight:bold; line-height:2;" >  test   </nuxt-link>
    </div>  

(注意::style后面是个json,否则会报错!)    

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/604803.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

酷雷曼精彩亮相CMC 2023中国元宇宙大会,助力云上VR直播

12月23日&#xff0c;2023中关村论坛系列活动——CMC 2023中国元宇宙大会在石景山首钢园冰壶馆成功举办。酷雷曼VR作为元宇宙领域代表企业之一受邀出席会议&#xff0c;分享元宇宙技术研发成果及应用方案&#xff0c;并为大会提供VR直播技术支持。 大咖云集&#xff0c;共商元宇…

基于 HTTPS 协议配置 Git 连接 GitHub

文章目录 0.安装 Git1.注册 GitHub 账号2.配置 Git 的用户名和邮箱3.远程连接 GitHub 有两种传输协议4.基于 SSH 协议配置 Git 连接 GitHub5.基于 HTTPS 协议配置 Git 连接 GitHub5.1 创建 GitHub 个人访问令牌5.2 有两种方法将本地仓库和远程仓库关联起来5.2.1 第一种方法&…

Java-网络爬虫(一)

文章目录 前言一、网络爬虫1. 介绍2. 爬虫协议3. 法律法规 二、相关知识1. HttpClient2. Jsoup 三、综合案例1. 案例一2. 案例二 四、总结 前言 下篇&#xff1a;Java-网络爬虫(二) 在大数据时代&#xff0c;信息采集是一项重要的工作&#xff0c;而互联网中的数据是海量的&am…

Maven之私服

1 介绍 团队开发现状分析私服是一台独立的服务器&#xff0c;用于解决团队内部的资源共享与资源同步问题Nexus Sonatype公司的一款maven私服产品 下载地址&#xff1a;https://help.sonatype.com/repomanager3/download win版安装包&#xff1a;https://pan.baidu.com/s/1wk…

【我的Rust库】get_local_info 0.1.6发布

get_local_info是一个获取linux本地信息的Rust三方库&#xff0c;其目标是降低获取本地linux系统信息的难度。支持银河麒麟10、UOS、鸿蒙等国产系统。 项目维护&#xff1a;长期 当前版本&#xff1a;0.1.6 当前功能&#xff1a; 1.网络功能 1.1获取活动网卡信息&#xff…

集团企业OA办公协同平台建设方案

一、企业对协同应用的需求分析 实现OA最核心、最基础的应用 业务流转&#xff1a;收/发文、汇报、合同等各种审批事项的业务协作与办理 信息共享&#xff1a;规章制度、业务资料、共享信息资源集中存储、统一管理 沟通管理&#xff1a;电子邮件、手机短信、通讯录、会议协作等…

6.云原生之jenkins集成SonarQube

文章目录 搭建 SonarQube配置SonarQube创建sonar-token生成令牌查看jenkins暴露的NodePort端口创建Webhook 服务器将 SonarQube 配置添加到 ks-installer Jenkins集成SonarQube将 SonarQube 服务器添加至 Jenkinsjenkins配置SonarQubejenkins中配置SonarQube创建Jenkins凭证将 …

Django 10 表单

表单的使用流程 1. 定义 1. terminal 输入 django-admin startapp the_14回车 2. tutorial子文件夹 settings.py INSTALLED_APPS 中括号添加 "the_14", INSTALLED_APPS [django.contrib.admin,django.contrib.auth,django.contrib.contenttypes,django.contrib…

Eslint+Prettier

1.Eslint js验证的规则标准,Vue也有自己的独特的验证规则,vue-eslint-plugin属于vue自己的验证规则。 如果不想报错,可以在package.json/rules里面进行关闭,默认是开启的,默认缩进是两个空格。 2.Prettier - Code formatter 使写代码更加的美观 可选的配置项: 例如: module…

STM32---中断

中断框图 一.中断 中断&#xff1a;当有中断请求时&#xff0c;CPU会停止处理当前的任务&#xff0c;转而去处理中断任务。 中断输入线有19/20根&#xff08;互联型号20根&#xff09;。 分类&#xff1a;系统异常&#xff08;10个&#xff09;和外部中断&#xff08;60个&…

编程题实训-排序

第1关&#xff1a;基于链表的简单选择排序 任务描述 试以单链表为存储结构&#xff0c;实现简单选择排序算法。 编程要求 输入 多组数据&#xff0c;每组数据两行。第一行为序列的长度n&#xff0c;第二行为序列的n个元素&#xff08;元素之间用空格分隔&#xff0c;元素都…

20240107让Firefly的AIO-3399J开发板的Android11下配置为默认1080p录像

20240107让Firefly的AIO-3399J开发板的Android11下配置为默认1080p录像 2024/1/7 23:01 开发板&#xff1a;Firefly的AIO-3399J【RK3399】 SDK&#xff1a;rk3399-android-11-r20211216.tar.xz【Android11】 Android11.0.tar.bz2.aa【ToyBrick】 Android11.0.tar.bz2.ab Androi…

QT 的信号和槽机制实现原理的常见问题问答

1. QT的信号和槽的机制实现的原理是什么&#xff1f; Qt的信号和槽机制是通过元对象系统&#xff08;Meta-Object System&#xff09;来实现的。 元对象系统是Qt的一个核心特性&#xff0c;它通过在编译期间为每个QObject派生类生成元对象&#xff08;Meta Object&#xff09…

芯片验证入门踩坑指南(1)

因为一些原因&#xff0c;从华为数通C软件开发到海思这边做芯片验证&#xff0c;快一个月&#xff0c;说下一些心得与体会&#xff1a; 如何快速上手&#xff1a; 因为项目非常赶&#xff0c;几乎没有脱产学习时间&#xff0c;就是直接干项目&#xff0c;一开始不需要知道原理…

OpenCV-18图像的翻转和旋转

一、图像的翻转 使用API---cv.flip&#xff08;src, flipCode&#xff09; flipCode 0表示上下翻转 flipCode > 0表示左右翻转 flipCode < 0上下 左右翻转 或者使用np的翻转src[: : -1,: : -1]实现上下翻转。 示例代码如下&#xff1a; import cv2 import numpy…

项目管理工具Maven

Maven Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台。 课程内容的介绍 1. Maven基础内容 2. Maven的依赖管…

数据版本控制利器LakeFS的介绍,以及其使用方法,与其它工具结合案例

LakeFS介绍 LakeFS 是一个开源的数据湖版本控制系统&#xff0c;可以帮助用户管理和控制数据湖中的数据版本。以下是LakeFS的一些主要用处和功能介绍&#xff1a; 数据版本控制&#xff1a;LakeFS 提供了类似于 Git 的版本控制功能&#xff0c;可以跟踪和管理数据湖中的数据版…

【一】使用vue-cli创建vue3的helloworld项目

不再推荐使用vue-cli命令创建vue3的项目&#xff0c;vue-cli 是 Vue 早期推出的一款脚手架&#xff0c;使用 webpack 创建 Vue 项目。后期推荐使用 create-vue&#xff0c;create-vue 是 Vue3 的专用脚手架&#xff0c;使用 vite 创建 Vue3 的项目(关注【二】使用create-vue创建…

超维空间M1无人机使用说明书——41、ROS无人机使用yolo进行物体识别

引言&#xff1a;用于M1无人机使用的18.04系统&#xff0c;采用的opencv3.4.5版本&#xff0c;因此M1无人机只提供了基于yolov3和yolov4版本的darknet_ros功能包进行物体识别&#xff0c;识别效果足够满足日常的物体识别使用&#xff0c;如果需要更高版本的yolov7或者yolov8&am…

十八:爬虫-JS逆向(下)

一&#xff1a;AES与DES DES对称加密,是一种比较传统的加密方式,其加密运算、解密运算使用的是同样的密钥&#xff0c;信息的发送者。和信息的接收者在进行信息的传输与处理时&#xff0c;必须共同持有该密钥(称为对称密码),是一种对称加密算法。一般来说加密用的是encrypt()函…