Vue两组间通过传值设置另一个组件背景
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两组间通过传值设置另一个组件背景的更多相关文章
- vue组件定义方式,vue父子组件间的传值
vue组件定义方式,vue父子组件间的传值 <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...
- Vue 组件间的传值(通讯)
组件之间的通讯分为三种 父给子传 子给父传 兄弟组件之间的通讯 1 父组件给子组件传值 子组件嵌套在父组件内部,父组件给子组件传递一个标识,在子组件内部用props接收,子组件在模板里可以通过{{}} ...
- Vue—非父子组件间的传值(Bus/发布订阅模式/观察者模式/总线)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue中父子间传值和非父子间传值
vue传值一般分三种方式:父组件向子组件传值.子组件向父子间传值.非父子组件进行传值 一.父组件向子组件传值:父组件引用子组件后,通过数据绑定(v-bind)向子组件传值 父组件: <templ ...
- .NET开发之窗体间的传值转化操作
DOTNET开发之窗体间的传值转化操作 好想把自己最近学到的知识写下来和各位朋友分享,也希望得到大神的指点.今天终于知道自己要写点什么,就是关于WPF开发时简单的界面传值与简单操作. 涉及两个界面:一 ...
- C# WPF 通过委托实现多窗口间的传值
在使用WPF开发的时候就不免会遇到需要两个窗口间进行传值操作,当然多窗口间传值的方法有很多种,本文介绍的是使用委托实现多窗口间的传值. 在上代码之前呢,先简单介绍一下什么是C#中的委托(如果只想了解如 ...
- 使用Block在两个界面之间传值
首先,创建两个视图控制器,在第一个视图控制器中创建一个UILabel和一个UIButton,其中UILabel是为了显示第二个视图控制器传过来的字符串,UIButton是为了push到第二个界面. 第 ...
- Jmeter线程组间传递参数
现在做测试和以前不太一样了,以前只要站在一个用户的角度做端到端的UI测试就可以了,现在不会做接口测试,出去都不好意思和别人打招呼.那提到接口测试,就不得不提一下接口测试利器Jmeter,大家也都知道, ...
- vue几种简单的传值方式
除了一下的几种方式外,可以参考 https://www.cnblogs.com/hpx2020/p/10936279.html 组件传值的方法: 一.父组件向子组件传递数据(props) 第1:父组件 ...
- vue 听说你很会传值?
前置 大小 vue 项目都离不开组件通讯, 在这里总结一下vue组件通讯方式并列出, 都是简单的例子. 适合像我这样的小白.如有错误,欢迎指正. 温馨提示: 下文没有列出 vuex, vuex 也是重 ...
随机推荐
- Linux操作系统网络模块
Linux操作系统的网络模块是负责网络通信的核心部分.它通过实现各种协议和算法,使得计算机能够在网络中进行数据交换和通信.网络模块主要包括以下几个方面的功能: (1)IP协议栈:负责处理网络层的数据包 ...
- Django框架——手写web框架、wsgiref模块、动静态网页、jinja2模块、主流web框架、Django简介、基本使用、app概念、目录结构、三板斧
web应用 '''通过浏览器访问的应用程序!!!''' 1.两种模式c/s b/s B/S:browser---------------->server 2.web应用程序的有点 2.1 只需要 ...
- CSS 点击穿透pointer-events
在项目中,当需要展示一个元素在最顶层,但又不想让它影响下层的交互,可以pointer-events:none pointer-events介绍 pointer-events: auto | none ...
- Linux系统下CUDA和cuDNN环境配置
本人配置环境:linux服务器,ubantu18,显卡驱动11.0,安装CUDA11.0和cuDNN8.2.1. 一.安装CUDA11.0 1.先多找几篇博客,了解大概的流程,避免踩坑. 2.官网下载 ...
- 2022-05-08:给你一个下标从 0 开始的字符串数组 words 。每个字符串都只包含 小写英文字母 。words 中任意一个子串中,每个字母都至多只出现一次。 如果通过以下操作之一,我们可以
2022-05-08:给你一个下标从 0 开始的字符串数组 words .每个字符串都只包含 小写英文字母 .words 中任意一个子串中,每个字母都至多只出现一次. 如果通过以下操作之一,我们可以从 ...
- ICLR 2017-RL2: Fast Reinforcement Learning via Slow Reinforcement Learning
Key GRUs+TRPO+GAE 解决的主要问题 现有RL方法需要手动设置特定领域的算法 DRL学习的过程需要大量的试验牺牲了高样本复杂度(每个task需要数万次经验),相比人来说,这是由于缺乏先验 ...
- 【CF】掉分总结
比赛总结 前情提要 自从前段时间连续掉分,就心态崩了,还是自己太菜,一直想写个总结,看看这几场比赛都干了啥,以后准备怎么办.鸽了这么久的总结,是该写写了. 这是正文 首先大致提一下情感曲线(菜的真实) ...
- 【Java】GridBagLayout布局笔记
参考博客: 样例解释:https://blog.csdn.net/wstz_5461/article/details/78067176 参数解释:https://blog.csdn.net/shiSh ...
- Vue 新建项目+基本语法
新建项目: 导入依赖: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"> ...
- Doris(一) -- 简介和安装
Doris 简介 Doris 概述 Apache Doris 由百度大数据部研发 (之前叫百度 Palo,2018 年贡献到 Apache 社区后,更名为 Doris), 在百度内部,有超过 200 ...