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 也是重 ...
随机推荐
- SpringBoot @Target、@Retention、@Documented注解简介
jdk1.5起开始提供了4个元注解:@Target.@Retention.@Documented.@Inherited.何谓元注解?就是注解的注解. 在程序开发中,有时候我们需要自定义一个注解,这个自 ...
- Mysql关联删除CSV中的相关数据
问题描述:提供一个csv文件,记录的是一些不同数据库的不同表中的共同字段account_id数据,需要在A库的account表中做关联删除 解决思路:csv文件中储存的都是account_id,六位纯 ...
- python数据可视化神库:Matplotlib快速入门
Matplotlib易于使用,是Python中了不起的可视化库.它建立在NumPy数组的基础上,旨在与更广泛的SciPy堆栈一起工作,并由几个图组成:线图.条形图.散点图.直方图等. 快速入门 imp ...
- 获取电脑的网络连接状态(五)WebClient
网络连接判断,使用WebClient测试获取: 1 public static bool IsWebClientConnected() 2 { 3 try 4 { 5 using (var clien ...
- [Pytorch框架] 4.3 fastai
文章目录 4.3 fastai 4.3.1 fastai介绍 fastai库 fast.ai课程 Github 4.3.2 fastai实践 MNIST 4.3.3 fastai文档翻译 import ...
- 机器视觉基本理论(opencv)
1. 什么是图像采样 采样是按照某种时间间隔或空间间隔,将空间上连续的图像变换成离散点的操作称为图像采样 2. 什么是图像分变率 采样 得到的离散图像的尺寸称为图像分辨率.分辨率是数字图像可辨别的最小 ...
- [Pytorch框架] 1.6 训练一个分类器
文章目录 训练一个分类器 关于数据? 训练一个图像分类器 在GPU上训练 多GPU训练 下一步? 训练一个分类器 上一讲中已经看到如何去定义一个神经网络,计算损失值和更新网络的权重. 你现在可能在想下 ...
- shell自动化脚本,启动、停止应用程序
#!/usr/bin/env bash # 常量初始化 set_runtime_vars(){ # 日期时间 Now_Date=`date +"%Y-%m-%d %H:%M:%S" ...
- redis内存突然暴增,排查思路是什么
1 这种暴增的应该还是上次一个群友说的,更多可能是外部因素导致的,应用新上线,定时任务这些,再有就是cat上查是哪些指令多,以及比对和之前的时间的差异 看是否有定时任务 或者 新上线的活动 ,在看下监 ...
- 2021-11-08:扁平化嵌套列表迭代器。给你一个嵌套的整数列表 nestedList 。每个元素要么是一个整数,要么是一个列表;该列表的元素也可能是整数或者是其他列表。请你实现一个迭代器将其扁平化
2021-11-08:扁平化嵌套列表迭代器.给你一个嵌套的整数列表 nestedList .每个元素要么是一个整数,要么是一个列表:该列表的元素也可能是整数或者是其他列表.请你实现一个迭代器将其扁平化 ...