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. 最热学习🤩:ChatGPT从入门到应用!

    4 月 25 日,我们将联合 Datawhale 团队组织 AIGC 主题学习活动「ChatGPT 从入门到应用」,欢迎大家参加! Datawhale 社区介绍 Datawhale 是一个专注于数据科 ...

  2. P4055 [JSOI2009] 游戏(博弈论 、最大匹配)

    P4055 [JSOI2009] 游戏 目录 P4055 [JSOI2009] 游戏 题目传送门 题目大意 : 思路: code 题目传送门 题目大意 : 小AA和小YY玩游戏,在这个游戏中,同一个格 ...

  3. Python_11 类的方法

    一.查缺补漏 1. 实例方法必须用类实例化对象()来调用,用类来调用时会执行,但是self中不是实例化类地址而是传的字符串 二.类中的方法 1. 实例方法 1. 定义在类里面的普通方法(函数) 2.  ...

  4. Comparator之用最少数量的箭引爆气球

    文章目录 前言 关于Comparator 原题 前言 今天刷个题,遇到一个很有趣的问题,关于Comparator的使用,感觉也是一个关于写代码的一些小细节的问题 关于Comparator Compar ...

  5. RedisTemplate在拦截器前没有注入的问题

    RedisTemplate为null的问题 最近在搭建一个项目,然后项目框架采用的是spring boot,然后登录我就使用新学习的JWT嘛,然后就想着在请求进来的时候使用拦截器先对传进来的token ...

  6. 极速进化,光速转录,C++版本人工智能实时语音转文字(字幕/语音识别)Whisper.cpp实践

    业界良心OpenAI开源的Whisper模型是开源语音转文字领域的执牛耳者,白璧微瑕之处在于无法通过苹果M芯片优化转录效率,Whisper.cpp 则是 Whisper 模型的 C/C++ 移植版本, ...

  7. 如何利用Requestly提升前端开发与测试的效率,让你事半功倍?

    痛点 前端测试 在进行前端页面开发或者测试的时候,我们会遇到这一类场景: 在开发阶段,前端想通过调用真实的接口返回响应 在开发或者生产阶段需要验证前端页面的一些 异常场景 或者 临界值 时 在测试阶段 ...

  8. 2021-11-13:至少有 K 个重复字符的最长子串。给你一个字符串 s 和一个整数 k ,请你找出 s 中的最长子串, 要求该子串中的每一字符出现次数都不少于 k 。返回这一子串的长度。提示:1

    2021-11-13:至少有 K 个重复字符的最长子串.给你一个字符串 s 和一个整数 k ,请你找出 s 中的最长子串, 要求该子串中的每一字符出现次数都不少于 k .返回这一子串的长度.提示:1 ...

  9. json和字典dict的区别

    json和字典dict的区别? 银河有希子关注 2021.07.03 11:13:00字数 987阅读 173 作者:Gakki json和字典dict的区别? 字典写法:dict1 = {'Alic ...

  10. MultiBoot SPI

    对于7系列FPGA来说,计算器件启动时间按照以下公式: Config time = Bitstream size / (Config clk freq * Config interface width ...