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

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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/25332.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

spring-data-mongodb版本兼容问题

spring-data-mongodb版本兼容问题

spring-data-mongodb与mongodb驱动有兼容性问题&#xff0c;不匹配会报NoSuchMethod异常&#xff0c;mongodb的java驱动包在4.0之后由mongodb-java-driver更名为mongodb-driver-sync。 spring-data-mongodb包依赖中有mongodb-driver-core&#xff0c;但缺诸如MongoCollection等…
阅读更多...
【C语言】文件操作（终卷）

【C语言】文件操作（终卷）

前言 我们在上一卷中了解了顺序读写的函数&#xff0c;现在就让我们从随机读写的函数开始吧。 什么是随机读写&#xff1f; 就是想在哪个位置读或写都行&#xff0c;比较自由。文件打开时光标默认在起始位置。想从后面的某个部分读或写&#xff0c;就得让文件指针来到那个位…
阅读更多...
VMware Fusion 如何增加linux硬盘空间并成功挂载

VMware Fusion 如何增加linux硬盘空间并成功挂载

文章目录 0. 前言1. 增加硬盘空间2. 硬盘分区2.1 查看硬盘2.2 分区2.3 格式化2.4 挂载 3. 参考 0. 前言 如果发现虚拟机分配的硬盘不足&#xff0c;需要增加硬盘空间。本文教给大家如何增加硬盘空间并成功挂载。 查看当前硬盘使用情况&#xff1a; df -h可以看到&#xff0c…
阅读更多...
什么是档案数字化管理

什么是档案数字化管理

档案数字化管理指的是将传统的纸质档案转换为数字形式&#xff0c;并通过电子设备、软件和网络技术进行管理和存储的过程。 档案数字化管理包括以下几个步骤&#xff1a; 1. 扫描和数字化&#xff1a;将纸质档案通过扫描仪转换为数字图像或文档。可以使用OCR&#xff08;光学字…
阅读更多...
SD 使用教程

SD 使用教程

SD 换脸步骤 使用Stable Diffusion (SD) 进行换脸的基本步骤可以从以下几个方面概述&#xff0c;这里以一种常见的方式为例&#xff0c;结合了插件的使用来简化流程&#xff1a; 准备工作 安装必要的软件和插件&#xff1a;首先&#xff0c;确保你已经安装了Stable Diffusion…
阅读更多...
QT 信号和槽 解除关联示例 disconnect

QT 信号和槽 解除关联示例 disconnect

对于源端的信号和接收端的槽函数&#xff0c;不仅可以进行关联&#xff0c;在关联之后&#xff0c;如果不需要用到它们的关联关系了&#xff0c;可以使用 disconnect 函数解除之前的关联关系。disconnect 函数就是 connect 函数的逆向过程&#xff0c;它们二者的参数是差不多的…
阅读更多...
ubuntu24安装python2

ubuntu24安装python2

下载python2 wget https://www.python.org/ftp/python/2.7.9/Python-2.7.9.tgz 解压python2 sudo tar xzf Python-2.7.9.tgz 安装python2 sudo ./configure --enable-optimizations sudo make altinstall 创建快捷方式&#xff08;随便选择一种&#xff09; sudo ln -sfn…
阅读更多...
Qt QStackedWidget类详细分析

Qt QStackedWidget类详细分析

一.定义 QStackedWidget类是一个容器控件&#xff0c;它提供了一个堆叠的页面布局方式&#xff0c;每个页面可以包含一个子部件。在QStackedWidget中&#xff0c;只有当前活动的页面是可见的&#xff0c;其他页面会被隐藏起来。 QStackedWidget类的常用方法包括&#xff1a; a…
阅读更多...
[数据集][图像分类]人种黄种人白人黑人分类数据集970张4类别

[数据集][图像分类]人种黄种人白人黑人分类数据集970张4类别

数据集类型&#xff1a;图像分类用&#xff0c;不可用于目标检测无标注文件 数据集格式&#xff1a;仅仅包含jpg图片&#xff0c;每个类别文件夹下面存放着对应图片 图片数量(jpg文件个数)&#xff1a;970 分类类别数&#xff1a;4 类别名称:[“Asian”,“Caucasian”,“Indian…
阅读更多...
什么是 AOF 重写？AOF 重写机制的流程是什么？

什么是 AOF 重写？AOF 重写机制的流程是什么？

引言&#xff1a;在Redis中&#xff0c;持久化是确保数据持久性和可恢复性的重要机制之一。除了常见的RDB&#xff08;Redis Database&#xff09;持久化方式外&#xff0c;AOF&#xff08;Append Only File&#xff09;也是一种常用的持久化方式。AOF持久化通过记录Redis服务器…
阅读更多...
01 基础知识

01 基础知识

1、Git 的使用 Git 在工作中常用，是必学的东西。请参考下面 pdf 教程搭建环境，并尝试维护一个自己的 github： 下面 git 常用命令，应对 90% 以上工作需求： git clone //从服务器拉取代码 git config //配置开发者用户名和邮箱 git branch //创建、…
阅读更多...
自然语言处理（NLP）—— 自动摘要

自然语言处理（NLP）—— 自动摘要

自动摘要是一种将长文本信息浓缩为短文本的技术&#xff0c;旨在保留原文的主要信息和意义。 1 自动摘要的第一种方法 它的第一种方法是基于理解的&#xff0c;受认知科学和人工智能的启发。 在这个方法中&#xff0c;我们首先建立文本的语义表示&#xff0c;这可以理解为文本…
阅读更多...
基于Gabor小波特征提取和PSO-SVM的胃溃疡分类（MATLAB R2018a）

基于Gabor小波特征提取和PSO-SVM的胃溃疡分类（MATLAB R2018a）

Gabor滤波器是在测不准原则下能够在时域和频域中唯一能取得最佳的联合分辨率函数&#xff08;测不准原则&#xff1a;是指在时域与频域中都要获得任何的测量精度那是不可能同时实现的&#xff0c;要使时域分辨率有所提高&#xff0c;必须牺牲频域的分辨率&#xff0c;反之亦然&…
阅读更多...
Java | Leetcode Java题解之第134题加油站

Java | Leetcode Java题解之第134题加油站

题目&#xff1a; 题解&#xff1a; class Solution {public int canCompleteCircuit(int[] gas, int[] cost) {int n gas.length;int i 0;while (i < n) {int sumOfGas 0, sumOfCost 0;int cnt 0;while (cnt < n) {int j (i cnt) % n;sumOfGas gas[j];sumOfCos…
阅读更多...
Polar Web【中等】search

Polar Web【中等】search

Polar Web【中等】search Contents Polar Web【中等】search思路&探索首页一般注入方式 EXP&效果Payload 总结 思路&探索 见到题目标题&#xff0c;预测可能有目录扫描或者输入框查询数据之类情况&#xff0c;具体细节在破解过程中才能清楚 打开站点&#xff0c;显…
阅读更多...
python记录之集合

python记录之集合

Python中的集合&#xff08;Set&#xff09;是一个无序且不包含重复元素的数据结构。集合主要用于成员检测和数据去重。 1. 集合的创建 在Python中&#xff0c;你可以使用大括号{}或set()函数来创建一个集合。注意&#xff0c;如果你使用大括号{}并且只包含一个元素&#xff…
阅读更多...
如何下载BarTender软件及详细安装步骤

如何下载BarTender软件及详细安装步骤

BarTender是美国海鸥科技推出的一款优秀的条码打印软件&#xff0c;应用于 WINDOWS95 、 98 、 NT 、 XP 、 2000 、 2003 和 3.1 版本&#xff0c; 产品支持广泛的条形码码制和条形码打印机&#xff0c; 不但支持条形码打印机而且支持激光打印机&#xff0c;还为世界知名品牌条…
阅读更多...
使用Spring Boot设计一套BI系统

使用Spring Boot设计一套BI系统

商业智能&#xff08;Business Intelligence&#xff0c;简称BI&#xff09;系统是一种将数据转化为可操作信息&#xff0c;帮助企业进行决策支持的技术与工具的集合。随着大数据时代的到来&#xff0c;BI系统在企业中的应用变得越来越广泛。本文旨在探讨如何使用Spring Boot框…
阅读更多...
前端-a-date-picker如何设置禁选时间段

前端-a-date-picker如何设置禁选时间段

想要做到如图所示的效果&#xff0c;代码如下&#xff1a; 第一个是只能选择某一天&#xff0c;第二个是只能选择某一个时间段 <a-date-pickerv-model:value"record.onTimeStr":show-time"{ format: HH:mm }"valueFormat"YYYY-MM-DD HH:mm:ss&qu…
阅读更多...
【RAG入门教程02】Langchian的Embedding介绍与使用

【RAG入门教程02】Langchian的Embedding介绍与使用

Embedding介绍 词向量是 NLP 中的一种表示形式&#xff0c;其中词汇表中的单词或短语被映射到实数向量。它们用于捕获高维空间中单词之间的语义和句法相似性。 在词嵌入的背景下&#xff0c;我们可以将单词表示为高维空间中的向量&#xff0c;其中每个维度对应一个特定的特征…
阅读更多...
最新文章

Copyright @ 2022~2023