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 也是重 ...
随机推荐
- ZR.Admin小改和VUE3版本体验
前言 孔乙己显出极高兴的样子,将两个指头的长指甲敲着柜台,点头说:"对呀,对呀!......回字有四样写法,你知道么?" 大家好,我是44岁的大龄程序员码农阿峰.阿峰从事编程二十年 ...
- 京东小程序接入ARVR的技术方案和性能调优
作者:京东零售 戴旭 京东小程序是一个开放技术平台,正在被越来越多的头部品牌选择,用于站内私域流量的营销和运营.诸如各种日化.奢侈品等品牌对ARVR有较多的诉求,希望京东小程序引擎提供一些底层能力,叠 ...
- Object o = new Object();
对象的创建过程: 1,申请内存,并初始化: 2,构造器初始化: 3,o指向对象. 对象在内存中的存储布局: 使用jol工具打印java对象在内存的存储布局: 其中,对象头的组成: 对象头包括Mark ...
- Azure DevOps(二)Azure Pipeline 集成 SonarQube 维护代码质量和安全性
一,引言 对于今天所分析的 SonarQube,首先我们得了解什么是 SonarQube ? SonarQube 又能帮我们做什么?我们是否在项目开发的过程中遇到人为 Review 代码审核规范?带着 ...
- NC51101 Lost Cows
题目链接 题目 题目描述 \(N (2 \leq N \leq 8,000)\) cows have unique brands in the range 1..N. In a spectacular ...
- Go函数基础
在Go语言中,函数是一种基本的代码组织方式.函数能够接受输入参数并返回结果.Go语言中的函数有以下特点: 函数定义使用关键字func,后跟函数名.参数列表和返回值类型. 如果函数有返回值,则在函数定义 ...
- 大家都在用-神奇的Markdown格式
概述 Markdown 是一种轻量级标记语言,它可以使我们专注于写作内容,而不用过多关注排版,很多博主.作家等都用它来撰写文章~ 本文将给各位小伙伴介绍 Markdown 语法的使用,本篇文章索奇就是 ...
- 2022-08-27:以下go语言代码输出什么?A:[0];B:panic;C:7;D:不清楚。 package main import ( “fmt“ ) func main() { a
2022-08-27:以下go语言代码输出什么?A:[0]:B:panic:C:7:D:不清楚. package main import ( "fmt" ) func main() ...
- 2021-02-01:Redis 集群会有写操作丢失吗?
福哥答案2021-02-01: 以下情况可能导致写操作丢失:1.过期 key 被清理.2.最大内存不足,导致 Redis 自动清理部分 key 以节省空间.3.主库故障后自动重启,从库自动同步.4.单 ...
- 2022-04-19:A*算法, 过程和Dijskra高度相处, 有到终点的预估函数, 只要预估值<=客观上最优距离,就是对的。 预估函数是一种吸引力: 1)合适的吸引力可以提升算法的速度; 2)吸引
2022-04-19:A*算法, 过程和Dijskra高度相处, 有到终点的预估函数, 只要预估值<=客观上最优距离,就是对的. 预估函数是一种吸引力: 1)合适的吸引力可以提升算法的速度; 2 ...