当前位置： 首页 > news >正文

html+CSS+js部分基础运用19

news 2025/12/17 15:43:15

1. 应用动态props传递数据，输出影片的图片、名称和描述等信息【要求使用props】，效果图如下：

2.在页面中定义一个按钮和一行文本，通过单击按钮实现放大文本的功能。【要求使用$emit()】

  

代码可以截图或者复制黏贴放置在“实验步骤及实验结果”中

  • 1. 应用动态props传递数据，输出影片的图片、名称和描述等信息【要求使用props】

<script type="text/javascript">

//注册全局组件

Vue.component('my-movie', {

    //补充完整，传递动态Prop

    props:['img','name','description'],

    template : '<div> \

        <img :src="img"> \

        <div class="movie_name">{{name}}</div> \

        <div class="movie_des">{{description}}</div> \

      </div>'

})

//创建根实例

var vm = new Vue({

    el:'#example',

    data: {

       

            img1: '1.jpg',      

            name: '我是传奇',      

            description: '末世科幻动作电影'

       

    }

})

  • 2. 在页面中定义一个按钮和一行文本，通过单击按钮实现放大文本的功能。

<script>

    var vm = new Vue({

        el: '#app',

        data:{

            postFontSize1:10

        },

        methods: {

            showMsg(data) {

                this.postFontSize1 = data

            }

        },

        components: {

            'childNode': {

                template: '#child',

                data() {

                    return {

                        postFontSize: 10

                    }

                },

                methods: {

                    add() {

                        this.postFontSize++;

                        this.$emit('show', this.postFontSize)  

                    }

                },

            }

        }

    })

</script>

1. 应用动态props传递数据，输出影片的图片、名称和描述等信息

图1

2. 在页面中定义一个按钮和一行文本，通过单击按钮实现放大文本的功能。

图2

1. <html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>输出影片信息</title>

<style>

body{

font-family:微软雅黑}

img{

width:240px;

height:172px;}

.movie_name{padding-left:10px; font-size:18px; color: #333333; margin-top:8px;}

.movie_des{padding-left:10px; font-size:14px; color: #7a7a7a; margin-top:5px;}

</style>

<script src="vue.js"></script>

</head>

<body>

<div id="example">

    <!-- 补充完整 -->

    <my-movie v-bind:img="img1" :name="name" :description="description"></my-movie>

</div>

<script type="text/javascript">

//注册全局组件

Vue.component('my-movie', {

    //补充完整，传递动态Prop

    props:['img','name','description'],

    template : '<div> \

        <img :src="img"> \

        <div class="movie_name">{{name}}</div> \

        <div class="movie_des">{{description}}</div> \

      </div>'

})

//创建根实例

var vm = new Vue({

    el:'#example',

    data: {

       

            img1: '1.jpg',      

            name: '我是传奇',      

            description: '末世科幻动作电影'

       

    }

})

</script>

</body>

</html>



 

2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>子向父通信</title>

    <script src="vue.js"></script>

</head>

<body>

<div id="app">

    <child-node v-on:show="showMsg"></child-node>

    <div :style="{ fontSize: postFontSize1 + 'px' }">

        我是内容<br>

       

    </div>

   

</div>

<template id="child">

    <div>

        <button @click="add">增加</button><br>

       

    </div>

</template>

<script>

    var vm = new Vue({

        el: '#app',

        data:{

            postFontSize1:10

        },

        methods: {

            showMsg(data) {

                this.postFontSize1 = data

            }

        },

        components: {

            'childNode': {

                template: '#child',

                data() {

                    return {

                        postFontSize: 10

                    }

                },

                methods: {

                    add() {

                        this.postFontSize++;

                        this.$emit('show', this.postFontSize)  

                    }

                },

            }

        }

    })

</script>

</body>

</html>

相关文章：

html+CSS+js部分基础运用19

1. 应用动态props传递数据&#xff0c;输出影片的图片、名称和描述等信息【要求使用props】&#xff0c;效果图如下&#xff1a; 2.在页面中定义一个按钮和一行文本&#xff0c;通过单击按钮实现放大文本的功能。【要求使用$emit()】 代码可以截图或者复制黏贴放置在“实验…...

编程日记 2024/6/10 7:42:21

探索 Debian 常用命令：掌握 Linux 系统管理的重要一步

Debian 作为一个稳定、高效和安全的操作系统，广泛应用于服务器、桌面和嵌入式系统中。对于新手和经验丰富的系统管理员来说，熟练掌握 Debian 的常用命令是管理和维护系统的基础。本文将详细介绍一些在 Debian 系统中经常使用的命令，帮助读者更好地理解和操作这个强大的操作系…...

编程日记 2024/6/10 7:41:19

「C系列」C 作用域规则

文章目录 一、C 作用域规则二、案例1. 块作用域&#xff08;Block Scope&#xff09;2. 文件作用域&#xff08;File Scope&#xff09;3. 静态作用域&#xff08;Static Scope&#xff09;静态局部变量静态全局变量 4. 函数参数的作用域5. 结构体和联合体的作用域 三、相关链接…...

编程日记 2024/6/10 7:40:18

【机器学习基础】Python编程10：五个实用练习题的解析与总结

Python是一种广泛使用的高级编程语言&#xff0c;它在机器学习领域中的重要性主要体现在以下几个方面&#xff1a; 简洁易学&#xff1a;Python语法简洁清晰&#xff0c;易于学习&#xff0c;使得初学者能够快速上手机器学习项目。 丰富的库支持&#xff1a;Python拥有大量的机…...

编程日记 2024/6/10 7:38:16

【设计模式】结构型设计模式之 门面模式

介绍 门面模式&#xff08;Facade Pattern&#xff09;是一种常用的设计模式&#xff0c;属于结构型模式的范畴。它为子系统中的一系列接口提供一个简化的统一接口&#xff0c;即一个外观&#xff08;Facade&#xff09;&#xff0c;从而使子系统更加容易使用。门面模式并不修…...

编程日记 2024/6/10 7:37:15

MAC地址简介

一、MAC和ip地址 很多同学只知道ip地址&#xff0c;同时也知道ip在网络通讯中的重要性&#xff0c;实际上要实现网络通信的话&#xff0c;除了ip地址外还需要MAC地址的配合&#xff0c;只有在这两种地址的配合之下才能完整的实现互联网的通信。但是由于MAC地址的使用&#xff0…...

编程日记 2024/6/10 7:36:12

五种网络IO模型

目录 前言 文件描述符 为什么要多种io模型 同步IO 1.阻塞IO 2.非阻塞IO 3.多路复用IO&#xff08;事件驱动IO&#xff09; select: poll&#xff1a; epoll&#xff1a; 4.信号驱动IO 异步IO 区别 前言 文件描述符 首先我们了解一下文件描述符是什么&#xff1a;…...

编程日记 2024/6/10 7:35:11

VSCode超过390万下载的请求插件

Thunder Client 是一款在 VSCode&#xff08;Visual Studio Code&#xff09;中非常受欢迎的 REST API 客户端插件&#xff0c;由Ranga Vadhineni开发&#xff0c;现在已经有超过390万的下载量。它允许开发者直接在编辑器内发送 HTTP 请求&#xff0c;查看响应。Thunder Client…...

编程日记 2024/6/10 7:33:09

前端 JS 经典：下载的流式传输

触发下载在浏览器中有两种方式&#xff1a;1. 客户端的方式 2. 服务器的方式 1. 服务器的方式 通过 a 元素链接到一个服务器的地址&#xff0c;然后需要后端人员配置&#xff0c;当用户点击按钮请求这个地址时&#xff0c;服务端给他加上一个响应头。Content-Disposition 设置…...

编程日记 2024/6/10 7:30:06

k8s面试题大全，保姆级的攻略哦（三）

目录 1、简述ETCD及其特点? 2、简述ETCD适应的场景? 3、简述什么是Kubernetes? 4、简述Kubernetes和Docker的关系? 5、简述Kubernetes中什么是Minikube、Kubectl、Kubelet? 6、简述Kubernetes常见的部署方式? 7、简述Kubernetes如何实现集群管理? 8、简述Kubern…...

编程日记 2024/6/10 7:29:05

从年金理论到杠杆效应，再到财务报表与投资评估指标

一、解释普通年金终值和普通年金现值的概念。 普通年金终值&#xff1a;以利率为1%&#xff0c;每期收款100元&#xff0c;5期为例&#xff0c;普通年金终值的折算过程如图&#xff1a; 普通年金现值&#xff1a;以利率为1%&#xff0c;每期收款100元&#xff0c;5期为例&am…...

编程日记 2024/6/10 7:28:02

K8S - 用kubectl远程访问内网的k8s集群

在之前的文章 K8S - 在任意node里执行kubectl 命令 介绍过&#xff0c; 通过任何node 的主机&#xff0c; 用kubectl 管理集群是很简单 无非就是两个步骤: 下载 k8s master 上的admin.conf在当前主机配置 K8SCONFIG 环境变量指向 下载的config file 其他内网主机也适用 其…...

编程日记 2024/6/10 7:27:01

STM32F103C8移植uCOSIII并以不同周期点亮两个LED灯（HAL库方式）【uCOS】【STM32开发板】【STM32CubeMX】

STM32F103C8移植uC/OSIII并以不同周期点亮两个LED灯&#xff08;HAL库方式&#xff09;【uC/OS】【STM32开发板】【STM32CubeMX】 实验说明 将嵌入式操作系统uC/OSIII移植到STM32F103C8上&#xff0c;构建两个任务&#xff0c;两个任务分别以1s和3s周期对LED进行点亮—熄灭的…...

编程日记 2024/6/10 7:26:00

【c语言】qsort函数及泛型冒泡排序的模拟实现

&#x1f31f;&#x1f31f;作者主页&#xff1a;ephemerals__ &#x1f31f;&#x1f31f;所属专栏&#xff1a;C语言 目录 一、qsort函数 1.回调函数 2.qsort函数 3.void* 指针 二、泛型冒泡排序的模拟实现 1.比较函数的编写 2.交换函数的编写 3.冒泡排序的编写 4…...

编程日记 2024/6/10 7:24:59

MySQL之多表查询—表子查询

一、引言 上一篇博客学习了行子查询。&#xff08;看弹幕&#xff1a;同一张表用or,不同张表用union&#xff09; 下面接着学习子查询当中的最后一种——表子查询。 表子查询 1、概念 子查询返回的结果是多行多列&#xff0c;这种子查询称为表子查询。 2、常用的操作符 IN 3、…...

编程日记 2024/6/10 7:23:58

Java 18风暴来袭：解锁编程新纪元

一、引言 Java 18的发布标志着Java语言在性能、安全性和开发效率方面的又一次飞跃。本次更新不仅带来了新的语言特性&#xff0c;还包括了一些实验性功能和工具的改进。这些新特性旨在帮助开发者编写更高效、更安全的代码&#xff0c;并提升开发体验。 二、新特性概述 1. 默…...

编程日记 2024/6/10 7:21:56

文件操作(Python和C++版)

一、C版 程序运行时产生的数据都属于临时数据&#xff0c;程序—旦运行结束都会被释放通过文件可以将数据持久化 C中对文件操作需要包含头文件< fstream > 文件类型分为两种: 1. 文本文件 - 文件以文本的ASCII码形式存储在计算机中 2. 二进制文件- 文件以文本的二进…...

编程日记 2024/6/10 7:20:54

Git【版本控制命令】

02 【本地库操作】 1.git的结构 2.Git 远程库——代码托管中心 2.1 git工作流程 代码托管中心用于维护 Git 的远程库。包括在局域网环境下搭建的 GitLab 服务器&#xff0c;以及在外网环境下的 GitHub 和 Gitee (码云)。 一般工作流程如下&#xff1a; 1&#xff0e;从远程…...

编程日记 2024/6/10 7:19:52

打字侠是一款PWA网站，如何下载到电脑桌面？

嘿&#xff0c;亲爱的键盘侠们&#xff01; 你是否还在为寻找一款好用的打字练习工具而烦恼&#xff1f;别担心&#xff0c;今天我要给大家介绍一位超级英雄——打字侠&#xff01;它不仅是一个超级酷的打字练习网站&#xff0c;还是一款PWA&#xff08;渐进式网页应用&#x…...

编程日记 2024/6/10 7:18:51

Scikit-learn使用步骤？使用场景？

Scikit-learn&#xff08;简称sklearn&#xff09;是Python中一个非常流行的机器学习库&#xff0c;它提供了广泛的机器学习算法和工具&#xff0c;用于数据分析、特征工程、模型训练、模型评估等任务。以下是一个关于sklearn的基础教程&#xff0c;内容将按照几个主要部分进行…...

编程日记 2024/6/10 7:17:50

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

编程新知 2025/12/17 8:31:43

零门槛NAS搭建：WinNAS如何让普通电脑秒变私有云？

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

编程新知 2025/9/22 15:46:39

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

编程新知 2025/10/1 22:26:06

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

编程新知 2025/12/13 23:30:19

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/12/16 11:08:34

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

编程新知 2025/12/17 14:07:41

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

编程新知 2025/12/11 3:28:30

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

编程新知 2025/12/8 22:05:50

【C++进阶篇】智能指针

C内存管理终极指南&#xff1a;智能指针从入门到源码剖析 一. 智能指针1.1 auto_ptr1.2 unique_ptr1.3 shared_ptr1.4 make_shared 二. 原理三. shared_ptr循环引用问题三. 线程安全问题四. 内存泄漏4.1 什么是内存泄漏4.2 危害4.3 避免内存泄漏 五. 最后 一. 智能指针 智能指…...

编程新知 2025/12/13 8:47:33

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2025/12/13 10:22:33