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;光学字…
阅读更多...
[数据集][图像分类]人种黄种人白人黑人分类数据集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服务器…
阅读更多...
基于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;显…
阅读更多...
如何下载BarTender软件及详细安装步骤

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

BarTender是美国海鸥科技推出的一款优秀的条码打印软件&#xff0c;应用于 WINDOWS95 、 98 、 NT 、 XP 、 2000 、 2003 和 3.1 版本&#xff0c; 产品支持广泛的条形码码制和条形码打印机&#xff0c; 不但支持条形码打印机而且支持激光打印机&#xff0c;还为世界知名品牌条…
阅读更多...
前端-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;其中每个维度对应一个特定的特征…
阅读更多...
mm-qcamera-daemon主函数分析

mm-qcamera-daemon主函数分析

目录 main函数核心 main函数核心 main函数的主要任务包含在一个do{ } while(1)循环中. while循环中主要是监听文件描述符,故mai函数是由文件的读写来进行驱动的。 所有的文件描述符被封装成结构体 read_fd_info_t.其定义如下&#xff1a; /** read_fd_info_t* type -- either …
阅读更多...
拯救者Legion Y9000X IRX9 2024(83FD)原装出厂Windows11系统镜像下载

拯救者Legion Y9000X IRX9 2024(83FD)原装出厂Windows11系统镜像下载

lenovo联想2024款拯救者Y9000X IRX9 笔记本电脑【83FD】OEM预装Win11系统安装包&#xff0c;恢复开箱状态&#xff0c;自带恢复重置还原功能 链接&#xff1a;https://pan.baidu.com/s/1i_sVcnXF4qgsuj02rebe-Q?pwdyefp 提取码&#xff1a;yefp 联想原装WIN11系统自带所有…
阅读更多...
Vue2学习（04）

Vue2学习（04）

目录 一、组件的三大组成部分 二、组件的样式冲突scoped 三、scoped原理 ​编辑 四、data是一个函数 五、组件通信 1.概念&#xff1a;是指组件与组件之间的数据传递&#xff0c;组件的数据是独立的&#xff0c;无法直接访问其他组件的数据&#xff0c;想用其他组件的数…
阅读更多...
Pycharm中import torch报错解决方案（Python+Pycharm+Pytorch cpu版）

Pycharm中import torch报错解决方案（Python+Pycharm+Pytorch cpu版）

pycharm环境搭建完毕后&#xff0c;编写一个py文件demo&#xff0c;import torch报错&#xff0c;提示没有。设置python解释器&#xff1a; 选择conda环境&#xff0c;使用现有环境&#xff0c;conda执行文件找到Anaconda安装路径下Scripts文件夹内的conda.exe&#xff0c;最后…
阅读更多...
【Java SE】字符串常量池详解，什么情况下字符串String对象存在常量池，通过==进行判断，字符串创建及截取后是否同一个对象

【Java SE】字符串常量池详解，什么情况下字符串String对象存在常量池，通过==进行判断，字符串创建及截取后是否同一个对象

复习字符串创建方式 字符串的31种构造方法 public String();创建一个空白字符串&#xff0c; 不含有任何内容public String(char[] array);根据字符数组的内容&#xff0c;来创建对应的字符串public String(byte[] array);根据字节数组的内筒&#xff0c;来创建对应的字符串 …
阅读更多...
Docker：在DockerHub上创建私有仓库

Docker：在DockerHub上创建私有仓库

文章目录 Busybox创建仓库推送镜像到仓库 本篇开始要学习在DockerHub上搭建一个自己的私有仓库 Busybox Busybox是一个集成了三百多个最常用Linux命令和工具的软件&#xff0c;BusyBox包含了很多工具&#xff0c;这里拉取该镜像推送到仓库中&#xff1a; 安装 apt install …
阅读更多...
leetcode（力扣）第15题-三数之和---使用c语言双指针法，二级指针的应用

leetcode（力扣）第15题-三数之和---使用c语言双指针法，二级指针的应用

题目&#xff1a; 15. 三数之和 - 力扣&#xff08;LeetCode&#xff09; 编写过程的问题&#xff1a; 记住线索 1、对数组使用快排排序&#xff1b;2、固定 a 对 b、c 使用双指针&#xff1b;3、注意去重问题。函数返回值的类型。{1&#xff0c;2&#xff0c;-3}。结果作为…
阅读更多...
如何获取当前dll或exe模块所在路径？

如何获取当前dll或exe模块所在路径？

有时我们需要在当前运行的dll或exe模块中去动态加载当前模块同路径中的另一个库&#xff0c;或者启动当前模块同路径中的另一个exe程序&#xff0c;一般需要获取当前模块的路径&#xff0c;然后去构造同路径下目标模块的绝对路径&#xff0c;然后通过该绝对路径去加载或启动该目…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023