vue项目中,从一个组件获取图片url,并为另一个组件设置该图片为背景的盒子

子组件
<template>
<div
class="intd_content_banner"
:style="{background:'url('+banner.url+')'}">
</div>
</template>
<script>
export default {
props:['banner'],
name: "Banner",
}
</script>
父组件
<template>
<div id="intro">
<Banner :banner="banner"></Banner>
</div>
</template> <script>
import Banner from "./common/Banner";
export default {
name: "Intro",
data(){
return{
banner:{
title:'博音简介',
url:'https://liangcheng-law.oss-cn-beijing.aliyuncs.com/static/images/lawyer_banner.jpg',
}
}
},
components: {Banner}
}
</script>

最近在做vue项目时遇到的小问题,特此记录,下次遇到可以更好解决。
欢迎来访我的博客,一起学习更多:Plumliil

Vue两组间通过传值设置另一个组件背景的更多相关文章

  1. vue组件定义方式,vue父子组件间的传值

    vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...

  2. Vue 组件间的传值(通讯)

    组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...

  3. Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue中父子间传值和非父子间传值

    vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...

  5. .NET开发之窗体间的传值转化操作

    DOTNET开发之窗体间的传值转化操作 好想把自己最近学到的知识写下来和各位朋友分享,也希望得到大神的指点.今天终于知道自己要写点什么,就是关于WPF开发时简单的界面传值与简单操作. 涉及两个界面:一 ...

  6. C# WPF 通过委托实现多窗口间的传值

    在使用WPF开发的时候就不免会遇到需要两个窗口间进行传值操作,当然多窗口间传值的方法有很多种,本文介绍的是使用委托实现多窗口间的传值. 在上代码之前呢,先简单介绍一下什么是C#中的委托(如果只想了解如 ...

  7. 使用Block在两个界面之间传值

    首先,创建两个视图控制器,在第一个视图控制器中创建一个UILabel和一个UIButton,其中UILabel是为了显示第二个视图控制器传过来的字符串,UIButton是为了push到第二个界面. 第 ...

  8. Jmeter线程组间传递参数

    现在做测试和以前不太一样了,以前只要站在一个用户的角度做端到端的UI测试就可以了,现在不会做接口测试,出去都不好意思和别人打招呼.那提到接口测试,就不得不提一下接口测试利器Jmeter,大家也都知道, ...

  9. vue几种简单的传值方式

    除了一下的几种方式外,可以参考 https://www.cnblogs.com/hpx2020/p/10936279.html 组件传值的方法: 一.父组件向子组件传递数据(props) 第1:父组件 ...

  10. vue 听说你很会传值?

    前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是简单的例子. 适合像我这样的小白.如有错误,欢迎指正. 温馨提示: 下文没有列出 vuex, vuex 也是重 ...

随机推荐

  1. 前后端分离 nginx 的配置

    前端 nginx # 添加头部信息 proxy_send_timeout 30; # 后端服务器连接超时时间 proxy_read_timeout 30; # 后端服务器数据回传时间 proxy_co ...

  2. 27-lazy loading(懒加载和预加载)

    懒加载 document.getElementById('btn').onclick = function () { // 懒加载:当文件需要使用时才加载 import(/* webpackChunk ...

  3. R读入数据

    两种方式: edit()自动生成一个红色的表格,列名会自动的放上去,不够的会显示var5,var6,var7 mydata <- data.frame( age = numeric(0), ge ...

  4. Docker的实际应用

    一. 数据持久化 我们什么情况下要做数据持久化呢? 一定是在做容器之前先预判好哪些文件是要永久存储的, 而不会跟着它容器的一个生命周期而消失. 比如说配置文件. 日志文件. 缓存文件或者应用数据等等. ...

  5. Oracle 定时任务job实际应用

    目录 一.Oracle定时任务简介 二.dbms_job涉及到的知识点 三.初始化相关参数job_queue_processes 四.实际创建一个定时任务(一分钟执行一次),实现定时一分钟往表中插入数 ...

  6. Go windows 环境搭建

    下载地址 官网下载地址:https://golang.google.cn/dl/ 1.下载完之后 双击msi进行安装 路径可以不用改, 继续next 安装完之后就需要配置环境变量, 找到环境变量 GO ...

  7. 2022-06-02:一开始在0位置,每一次都可以向左或者向右跳, 第i次能向左或者向右跳严格的i步。 请问从0到x位置,至少跳几次可以到达。 来自字节。 力扣754. 到达终点数字。

    2022-06-02:一开始在0位置,每一次都可以向左或者向右跳, 第i次能向左或者向右跳严格的i步. 请问从0到x位置,至少跳几次可以到达. 来自字节. 力扣754. 到达终点数字. 答案2022- ...

  8. 2020-02-24:arr是面值数组,其中的值都是正数且没有重复。再给定一个正数aim。每个值都认为是一种面值,且认为张数是无限的。返回组成aim的最少货币数。

    福哥答案2020-02-24: 自然智慧即可. 1.递归.有代码. 2.动态规划.dp是二维数组.有代码. 代码用golang编写,代码如下: package main import ( " ...

  9. 2021-11-02:生命游戏。根据 百度百科 ,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机。给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个

    2021-11-02:生命游戏.根据 百度百科 ,生命游戏,简称为生命,是英国数学家约翰·何顿·康威在 1970 年发明的细胞自动机.给定一个包含 m × n 个格子的面板,每一个格子都可以看成是一个 ...

  10. 中文环境下使用 huggingface 模型替换 OpenAI的Embedding 接口

    OpenAI的文本嵌入衡量文本字符串的相关性.嵌入通常用于: 搜索(其中结果按与查询字符串的相关性排名) 聚类(其中文本字符串按相似性分组) 推荐(推荐具有相关文本字符串的项目) 异常检测(识别出相关 ...