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. IE盒模型和标准盒模型之间的差别

    1.W3C标准盒子模型 w3c盒子模型的范围包括margin.border.padding.content,并且content部分不包含其他部分 2.IE盒子模型 IE盒子模型的范围包括margin. ...

  2. 获取电脑的网络连接状态(三)Ping

    网络连接判断,使用ping测试获取: 1 private static async Task<bool> IsPingSuccess() 2 { 3 try 4 { 5 using (Pi ...

  3. MySQL百万数据深度分页优化思路分析

    业务场景 一般在项目开发中会有很多的统计数据需要进行上报分析,一般在分析过后会在后台展示出来给运营和产品进行分页查看,最常见的一种就是根据日期进行筛选.这种统计数据随着时间的推移数据量会慢慢的变大,达 ...

  4. 【开源游戏】Legends-Of-Heroes 基于ET 7.2的双端C#(.net7 + Unity3d)多人在线英雄联盟风格的球球大作战游戏。

    Legends-Of-Heroes 一个LOL风格的球球大作战游戏,基于ET7.2,使用状态同步  Main 基于C#双端框架[ET7.2],同步到ET主干详情请看日志.(https://github ...

  5. PaddlePaddle 飞桨复现 ResNet34

    import paddle.nn as nn class ResidualBlock(nn.Layer): def __init__(self, in_channels, out_channels, ...

  6. 2023-04-10:给定两个正整数x、y,都是int整型(java里) 返回0 ~ x以内,每位数字加起来是y的数字个数。 比如,x = 20、y = 5,返回2, 因为0 ~ x以内,每位数字加起

    2023-04-10:给定两个正整数x.y,都是int整型(java里) 返回0 ~ x以内,每位数字加起来是y的数字个数. 比如,x = 20.y = 5,返回2, 因为0 ~ x以内,每位数字加起 ...

  7. 2023-01-07:hyper/docker-registry-web是registry的web界面工具之一。请问部署在k3s中,yaml如何写?

    2023-01-07:hyper/docker-registry-web是registry的web界面工具之一.请问部署在k3s中,yaml如何写? 答案2023-01-07: yaml如下: api ...

  8. 2021-03-28:定义一种数:可以表示成若干(数量>1)连续正数和的数 。比如:5 = 2+3,5就是这样的数 ;12 = 3+4+5,12就是这样的数 。1不是这样的数,因为要求数量大于1个、连续正数和 。2 = 1 + 1,2也不是,因为等号右边不是连续正数 。给定一个参数N,返回是不是可以表示成若干连续正数和的数 。

    2021-03-28:定义一种数:可以表示成若干(数量>1)连续正数和的数 .比如:5 = 2+3,5就是这样的数 :12 = 3+4+5,12就是这样的数 .1不是这样的数,因为要求数量大于1 ...

  9. 2022-01-06:N个结点之间,表世界存在双向通行的道路,里世界存在双向通行的传送门. 若走表世界的道路,花费一分钟. 若走里世界的传送门,不花费时间,但是接下来一分钟不能走传送门. 输入: T为

    2022-01-06:N个结点之间,表世界存在双向通行的道路,里世界存在双向通行的传送门. 若走表世界的道路,花费一分钟. 若走里世界的传送门,不花费时间,但是接下来一分钟不能走传送门. 输入: T为 ...

  10. Django4全栈进阶之路2 创建虚拟环境、项目、app应用、启动运行项目

    一.安装虚拟环境: 命令:pip3 install virtualenv 二.安装管理工具: 命令:pip3 install virtualenvwrapper 三.新建: 命令:python -m ...