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

  1. 熟悉插值{{}}的用法，在页面中显示下列内容。

图1 插值语法的效果图

  1. 在页面中统计鼠标单机按钮的次数。【提示：v-on指令】，页面效果如下图所示：

图2 统计效果图

3、①单击按钮可以修改黑体字。②通过调试工具vue-devtools修改黑体字。

图3 修改名字和年龄效果图

  1. 文本框输入数据，下面能实时显示对应的欢迎信息。【指令v-model
  • 1.调用vue熟悉插值{{}}的用法

 <script type="text/javascript">

        new Vue({

            el:'#vue1',

            data:{

                myname:'xxx',

                html1:'<b>这些信息是使用b标记的显示效果！</b>',

                x:10,

                yesNo:true                  

            }

        })

    </script>

  • 2.

主要利用v-on函数和vue框架

<button v-on:click="updata">计数</button>

 <script>

        new Vue({

            el:'#app',

            data:{

                sum: 0

            },

            methods:{

                updata:function(){

                    this.sum++;

                }

            }

        })

    </script>

3.

通过vue-devtools调试和v-on实现

       <button v-on:click="update">修改</button>

4.

通过v-model实现

        <form action="" align="center">

            <fieldset>

                <legend align="center">学生信息</legend>

                姓名：<input type="text" v-model:value="name" value="1"><br>

                班级：<input type="text" v-model:value="class1" ><br>

                专业：<input type="text" v-model:value="zy" ><br><br>

                <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"><br><br>

                <p><span>{{zy}}</span>专业、<span>{{class1}}</span>班级的<span>{{name}}</span>同学，欢迎您！</p>

            </fieldset>

        </form>

1.

2

3

4

JavaScript使得信息和用户之间不仅只是一种显示和浏览的关系，而是实现了一种实时的、动态的、可交互的表达能力。从而基于CGI静态的HTML、页面将被可提供动态实时信息。

1.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="vue1">

        <p>1.文本插值：我的姓名是{{myname}}。</p>

        <p>2.使用v-html指令：<span v-html="html1"></span></p>

        <p>3.数值表达式绑定：5+5*3={{5+5*3}}</p>

        <p>4.函数表达式绑定：若x={{x}},则x<sup>2</sup>+5={{Math.pow(x,2)+5}}</p>

        <p>5.条件表达式绑定：若yesNo值为{{yesNo}}，则我的选择是{{yesNo?'确定':'取消'}}。</p>

        <p>6.语句不会生效：var score = 95</p>  

    </div>

    <script type="text/javascript">

        new Vue({

            el:'#vue1',

            data:{

                myname:'xxx',

                html1:'<b>这些信息是使用b标记的显示效果！</b>',

                x:10,

                yesNo:true                  

            }

        })

    </script>

</body>

</html>

2.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <button v-on:click="updata">计数</button>

        <p>按钮被单击<span>{{sum}}</span>次</p>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                sum: 0

            },

            methods:{

                updata:function(){

                    this.sum++;

                }

            }

        })

    </script>

</body>

</html>

3.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <p>大家好，我是<span>{{name}}</span></p>

        <p>今年<span>{{age}}</span>岁。</p>

        <button v-on:click="update">修改</button>

    </div>

    <script>

        new Vue({

            el:'#app',

            data:{

                name:"王老师",

                age:'30'

            },

            methods:{

                update:function(){

                    this.name="李老师";

                    this.age="40";

                }

            }

        })

    </script>

</body>

</html>

4.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

</head>

<body>

    <div id="app">

        <form action="" align="center">

            <fieldset>

                <legend align="center">学生信息</legend>

                姓名：<input type="text" v-model:value="name" value="1"><br>

                班级：<input type="text" v-model:value="class1" ><br>

                专业：<input type="text" v-model:value="zy" ><br><br>

                <input type="submit" value="提交">&nbsp;&nbsp;<input type="reset" value="重置"><br><br>

                <p><span>{{zy}}</span>专业、<span>{{class1}}</span>班级的<span>{{name}}</span>同学，欢迎您！</p>

            </fieldset>

        </form>

    </div>

    <script >

        new Vue({

            el:'#app',

            data:{

                name:'',

                class1:'',

                zy:''

            }

        })

    </script>

</body>

</html>

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

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

相关文章

服务器数据恢复—服务器raid5上层zfs文件系统数据恢复案例

服务器数据恢复—服务器raid5上层zfs文件系统数据恢复案例

服务器数据恢复环境&故障&#xff1a; 一台某品牌X3650M3服务器&#xff0c;服务器中有一组raid5磁盘阵列&#xff0c;上层采用zfs文件系统。 服务器未知原因崩溃&#xff0c;工作人员排查故障后发现服务器的raid5阵列中有两块硬盘离线导致该阵列不可用&#xff0c;服务器内…
阅读更多...
Web3.0区块链技术开发方案丨ICO与IDO代币开发

Web3.0区块链技术开发方案丨ICO与IDO代币开发

在Web3.0时代的到来下&#xff0c;区块链技术不仅改变着金融领域的格局&#xff0c;也在资金筹集和代币发行方面掀起了一场变革。初始代币发行&#xff08;ICO&#xff09;和去中心化代币发行&#xff08;IDO&#xff09;成为了项目融资的主要方式&#xff0c;其基于区块链技术…
阅读更多...
电脑开机之后要很久才能进入系统？进入WinPE也是卡顿半天？

电脑开机之后要很久才能进入系统？进入WinPE也是卡顿半天？

前言 小白最近接到了一张很奇怪的电脑维修单&#xff0c;客户说他的工作室电脑开机特别慢&#xff0c;开机之后特别卡顿&#xff0c;在使用的时候也会一卡一卡的。 这事情开始看很简单&#xff1a;估计就是电脑还是机械硬盘&#xff0c;所以开机很慢又卡顿。所以应该是把机械…
阅读更多...
LSDFi协议赛道4大稳定币项目，以bitget钱包为例

LSDFi协议赛道4大稳定币项目，以bitget钱包为例

纵览 LSDfi 生态繁荣的基石&#xff0c;LSD 稳定币赛道全解析 近期有许多建立在流动性质押通证的稳定币借贷协议开始出现在大众眼里&#xff0c;今天文章就要带大家来一一了解这些 LSDfi 协议究竟是如何争夺这块诱人的大饼。 LybraFinanceLSD 它透过抵押stETH/ETH 铸造&#…
阅读更多...
MySQL经典练习50题(上)（解析版）

MySQL经典练习50题(上)（解析版）

所有笔记、生活分享首发于个人博客 想要获得最佳的阅读体验&#xff08;无广告且清爽&#xff09;&#xff0c;请访问本篇笔记 MySQL经典练习50题&#xff08;上&#xff09; 创建数据库和表 -- 建 表 -- 学 生 表 CREATE TABLE Student( s_id VARCHAR(20), s_name VARCHAR(2…
阅读更多...
Linux shell编程学习笔记57：lshw命令 获取cpu设备信息

Linux shell编程学习笔记57：lshw命令 获取cpu设备信息

0 前言 在Linux中&#xff0c;获取cpu信息的命令很多&#xff0c;除了我们已经研究的 cat /proc/cpuinfo、lscpu、nproc、hwinfo --cpu 命令&#xff0c;还有 lshw命令。 1 lshw命令的功能 lshw命令源自英文list hardware&#xff0c;即列出系统的硬件信息&#xff0c;这些硬…
阅读更多...
C++之noexcept

C++之noexcept

目录 1.概述 2.noexcept作为说明符 3.noexcept作为运算符 4.传统throw与noexcept比较 5.原理剖析 6.总结 1.概述 在C中&#xff0c;noexcept是一个关键字&#xff0c;用于指定函数不会抛出异常。如果函数保证不会抛出异常&#xff0c;编译器可以进行更多优化&#xff0c;…
阅读更多...
C语言.数据结构.单链表经典算法

C语言.数据结构.单链表经典算法

数据结构.单链表经典算法 1.经典算法OJ题1&#xff1a;移除链表元素1.1题目描述&#xff1a;1.2题解&#xff1a;1.3图文解释&#xff1a; 2.经典算法OJ题2&#xff1a;反转链表2.1题目描述&#xff1a;2.2题解&#xff1a;2.3图文解释 3.经典算法OJ题3&#xff1a;合并两个有序…
阅读更多...
编译和运行qemu-uboot-arm64单板的Armbian系统

编译和运行qemu-uboot-arm64单板的Armbian系统

这篇文章ARM虚拟机安装OMV-CSDN博客遗留一个启动qemu-uboot-arm64单板Armbian镜像的问题&#xff0c;使用官方下载的镜像&#xff0c;会报错&#xff1a; fatal: no kernel available .... Failed to load /vmlinuz ...... qemu-system-aarch64 -smp 8 -m 8G -machine virt …
阅读更多...
WPF音乐播放器 零基础4个小时左右

WPF音乐播放器 零基础4个小时左右

前言&#xff1a;winfrom转wpf用久的熟手说得最多的是,转回去做winfrom难。。当时不明白。。做一个就知道了。 WPF音乐播放器 入口主程序 FontFamily"Microsoft YaHei" FontSize"12" FontWeight"ExtraLight" 居中显示WindowStartupLocation&quo…
阅读更多...
数据结构：并查集

数据结构：并查集

数据结构&#xff1a;并查集 题目描述参考代码 题目描述 输入样例 5 5 C 1 2 Q1 1 2 Q2 1 C 2 5 Q2 5输出样例 Yes 2 3参考代码 #include <iostream>using namespace std;const int N 100010;int n, m; int p[N], sz[N];int find(int x) // 返回x的祖宗节点 路径…
阅读更多...
山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（二十六）- 微服务(6)

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（二十六）- 微服务(6)

目录 10. Docker 10.1 Docker基本操作 10.1.1 镜像相关命令 10.1.2 容器相关命令 10.2 数据卷命令 10.2.1 常用命令 : 10.2.2 挂载数据卷 10. Docker 10.1 Docker基本操作 10.1.1 镜像相关命令 docker --help 查看docker帮助文档 docker images --help 查看docker ima…
阅读更多...
Java中条件运算符的嵌套使用技巧总结

Java中条件运算符的嵌套使用技巧总结

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…
阅读更多...
c语言项目-贪吃蛇项目2-游戏的设计与分析

c语言项目-贪吃蛇项目2-游戏的设计与分析

文章目录 前言游戏的设计与分析地图&#xff1a;这里简述一下c语言的国际化特性相关的知识<locale.h> 本地化头文件类项setlocale函数 上面我们讲到需要打印★&#xff0c;●&#xff0c;□三个宽字符找到这三个字符打印的方式有两种&#xff1a; 控制台屏幕的长宽特性&a…
阅读更多...
C++笔试强训day38

C++笔试强训day38

目录 1.天使果冻 2.dd爱旋转 3.小红取数 1.天使果冻 链接https://ac.nowcoder.com/acm/problem/219641 一开始都可以想到将数组的前x个数拿出来排降序输出第二个数即可。 但是因为询问量和数据量都较大&#xff0c;每次询问一次都要排序一次数组&#xff0c;会超时&#xf…
阅读更多...
ai聊天机器人app的分享！有4个热门的软件！

ai聊天机器人app的分享！有4个热门的软件！

在科技日新月异的今天&#xff0c;AI聊天机器人已经不再是遥不可及的科幻概念&#xff0c;而是实实在在走进了我们的日常生活。无论是工作中的信息查询&#xff0c;还是生活中的闲聊解闷&#xff0c;这些智能助手都能为我们提供便捷、高效的服务。那么&#xff0c;市面上都有哪…
阅读更多...
含有嘧啶的光活性阳离子共轭微孔聚合物通过“吸附杀死”抗菌策略促进感染伤口愈合

含有嘧啶的光活性阳离子共轭微孔聚合物通过“吸附杀死”抗菌策略促进感染伤口愈合

引用信息&#xff1a; 文 章&#xff1a;Photoactive cationic conjugated microporous polymers containing pyrimidine with an adsorption-killantibacterial strategy for infected wound healing. 期 刊&#xff1a;Chemical Engineering Journal&#xff08;影响因子…
阅读更多...
【MySQL】sql语句之库操作

【MySQL】sql语句之库操作

序言 在上篇文章学习当中&#xff0c;我们认识了数据库的相关概念&#xff0c;以及MySQL的框架和基本使用等内容&#xff0c;总之对数据库有了一个大致的认识&#xff0c;那么本篇文章将开始关于sql语句的学习&#xff0c;本文主要是关于库的属性和操作的内容&#xff0c;简单可…
阅读更多...
stm32下载驱动ST-LINK/V2驱动下载

stm32下载驱动ST-LINK/V2驱动下载

http://www.openedv.com/docs/tool/dap/ST-LINKV2.html https://www.stmcu.com.cn/Designresource/detail/fi rmware_software/709492
阅读更多...
电商风控指南：“仅退款”成部分商家梦魇，如何有效防控非法牟利

电商风控指南：“仅退款”成部分商家梦魇，如何有效防控非法牟利

目录 “仅退款”成不法分子牟利新途径 各电商平台的“仅退款”条款模糊 商家如何防范“仅退款”的欺诈 “仅退款”服务已成为各大电商平台的“标配”。然而&#xff0c;以“薅羊毛”的方式谋取不当利益&#xff0c;给商家造成了经济和声誉上的双重损失&#xff0c;引发了广泛关…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023