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

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

news 2026/2/7 19:22:55

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

未来机器人的大脑：如何用神经网络模拟器实现更智能的决策？

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

编程新知 2026/2/5 13:45:40

【网络】每天掌握一个Linux命令 - iftop

在Linux系统中&#xff0c;iftop是网络管理的得力助手&#xff0c;能实时监控网络流量、连接情况等&#xff0c;帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...

编程新知 2025/10/10 17:03:53

Vue记事本应用实现教程

文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展&#xff1a;显示创建时间8. 功能扩展&#xff1a;记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...

编程新知 2025/9/20 5:20:12

椭圆曲线密码学(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

【Linux】C语言执行shell指令

在C语言中执行Shell指令 在C语言中&#xff0c;有几种方法可以执行Shell指令&#xff1a; 1. 使用system()函数 这是最简单的方法&#xff0c;包含在stdlib.h头文件中&#xff1a; #include <stdlib.h>int main() {system("ls -l"); // 执行ls -l命令retu…...

编程新知 2025/11/20 18:42:48

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

编程新知 2026/1/31 17:09:43

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/12/4 19:00:05

使用van-uploader 的UI组件，结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

编程新知 2026/1/31 2:37:22

让AI看见世界：MCP协议与服务器的工作原理

让AI看见世界&#xff1a;MCP协议与服务器的工作原理 MCP&#xff08;Model Context Protocol&#xff09;是一种创新的通信协议&#xff0c;旨在让大型语言模型能够安全、高效地与外部资源进行交互。在AI技术快速发展的今天&#xff0c;MCP正成为连接AI与现实世界的重要桥梁。…...

编程新知 2026/1/31 11:13:53

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别

OpenPrompt 和直接对提示词的嵌入向量进行训练有什么区别 直接训练提示词嵌入向量的核心区别 您提到的代码： prompt_embedding = initial_embedding.clone().requires_grad_(True) optimizer = torch.optim.Adam([prompt_embedding...

编程新知 2025/7/4 0:50:01