Vue基础知识

Vue

Vue基础知识

image.png

image.png

image.png

image.png

image.png

v-bind:动态绑定属性值

Vue 修改,标签内也修改

image.png

image.png


在methods 中可以定义很多函数
在 data 中可以定义很多变量

image.png

v-if / v-show:对符合条件的元素进行展示
image.png

v-for:把数据遍历出现在网页中

案例

image.png

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./Vuejs/vue.js"></script></head><body><table border="1" cellspacing="0" width="60%" id="app"><tr><th>编号</th><th>姓名</th><th>年龄</th><th>性别</th><th>成绩</th><th>等级</th></tr><tr align="center" v-for="(user, index) in users"><td>{{index + 1}}</td><td>{{user.name}}</td><td>{{user.age}}</td><td><span v-if="user.gender == 1"></span><span v-if="user.gender == 0"></span></td><td>{{user.score}}</td><td><span v-if="user.score >= 85">优秀</span><span v-else-if="user.score >= 60">及格</span><span style="color : red;" v-else>不及格</span></td></tr></table></body></html><script>new Vue({el:"#app",data:{users:[{name:"Tom",age:20,gender:1,score:78},{name:"Rose",age:18,gender:0,score:86},{name:"Jerry",age:26,gender:1,score:90},{name:"Tony",age:30,gender:1,score:52}]},model:{}})</script>

Vue生命周期

image.png

image.png

image.png

Ajax

image.png

image.png

image.png

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

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

相关文章

postman自动化测试如何设置环境变量教程

在接口测试中&#xff0c;我们经常会用到一些通用请求参数&#xff0c;或者需要使用某个接口的返回参数作为另一个接口的请求参数&#xff0c;静态的参数还好&#xff0c;如果是经常变动的参数&#xff0c;那么操作起来&#xff0c;就特别的麻烦&#xff0c;这时候&#xff0c;…

如何利用监管工具有效防止员工私单飞单?

在今天的商业社会中&#xff0c;企业必须保持高度的监管和控制力度&#xff0c;以确保员工遵守公司的规章制度和道德准则。尤其在微信成为了日常工作中不可或缺的沟通工具的情况下&#xff0c;如何有效防止员工进行私单飞单成为了每个企业亟需解决的问题。 而微信管理系统通过…

【CCF】JCR3区,SCIEI双检,征稿领域广,来稿不拒!

一、期刊简介 3区计算机类SCI&EI 【期刊概况】IF&#xff1a;2.0-3.0&#xff0c;JCR3区&#xff0c;中科院4区&#xff1b; 【终审周期】走期刊部系统&#xff0c;3个月左右录用&#xff1b; 【检索情况】SCI&EI双检&#xff1b; 【WOS收录年份】2001年&#xff…

应急响应-Windows-进程排查

进程&#xff08;process&#xff09;是计算机中的程序关于某数据集合上的一次运动活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;是操作系统结果的基础。在早期面向进程结构中&#xff0c;进程是线程的容器。无论是在Windows系统还是Linux系统中&#xff0c…

专业远程控制软件有哪些品牌

远程办公、远程控制类的软件很多&#xff0c;主打方向和面向的客户人群也不一样。个人用户可能更在意便捷、免费等因素&#xff1b;专业用户会更注重安全性、管理功能等。今天我们介绍几个在全球知名的专业商业远程软件。 1、TeamViewer 简介&#xff1a;TeamViewer &#xf…

2016年认证杯SPSSPRO杯数学建模B题(第一阶段)低分辨率下看世界全过程文档及程序

2016年认证杯SPSSPRO杯数学建模 B题 低分辨率下看世界 原题再现&#xff1a; 数码摄像技术被广泛使用于多种场合中。有时由于客观条件的限制&#xff0c;拍摄设备只能在较低的分辨率下成像。为简单起见&#xff0c;我们只考虑单色成像。假设成像的分辨率为 32 64&#xff0c…

持续集成工具Jenkins的使用之安装篇(一)

Jenkins是一个基于Java开发的开源的一种持续集成工具&#xff0c;主要用于环境部署&#xff0c;监控重复性的工作&#xff0c;旨在提供一个开放易用的软件平台&#xff0c;使软件项目可以进行持续集成。要想使用它&#xff0c;你就必须的先安装&#xff0c;接下来我们就介绍下J…

win10重启以后才能识别有线耳机

最近遇到一件让人很无奈的事情&#xff0c;win10重启以后才能识别有限耳机。奇怪的是无线耳机没有问题。 bing搜索了很多&#xff0c;就是解决不了问题。 偶然之间&#xff0c;文后的参考文献被搜索到&#xff0c;该文献提供的方法比较简单&#xff0c;经过验证&#xff0c;方…

恒创科技:云服务器配置中的vCPU与物理CPU有啥区别?

​  说到云服务器&#xff0c;您可能经常会遇到vCPU这个词&#xff0c;而且它和物理CPU经常被拿来谈论。尽管它们听起来相似&#xff0c;但两者之间存在显著差异。在本文中&#xff0c;我们将详细讨论云vCPU和物理CPU之间的差异。 物理与虚拟 CPU 和 vCPU 之间最显著的区别在…

H5112B 48V 60V 80V 100V 多路共阳 RGB调光 PWM调光芯片

多路共阳恒流芯片是一种常用于LED驱动等应用的电子元件&#xff0c;它可以实现多个LED灯共享一个电流源&#xff0c;并且保持每个LED灯的亮度稳定。其工作原理如下&#xff1a; 多路输入&#xff1a;多路共阳恒流芯片通常有多个输入引脚&#xff0c;每个引脚对应一个LED灯。这…

kafka集群和Filebeat+Kafka+ELK

一、Kafka 概述 1.1 为什么需要消息队列&#xff08;MQ&#xff09; 主要原因是由于在高并发环境下&#xff0c;同步请求来不及处理&#xff0c;请求往往会发生阻塞。比如大量的请求并发访问数据库&#xff0c;导致行锁表锁&#xff0c;最后请求线程会堆积过多&#xff0c;从…

攻防世界WEB新手训练区

view_source 此题我愿称之为网安领域的hello world 查看网页源代码的方式一般有—— 右键->查看网页源代码F12->源代码/来源Ctrlu 随后可以再代码第17行处找到flag&#xff0c;至此迈入网安第一步。可喜可贺&#xff0c;可喜可贺... get_post 考察http的两种请求方式&…

“JavaScript 循环中的 ‘await‘

目录 前言 for使用await -- 有效的 forEach使用await -- 无效的 for of 使用await 有效的 for await of 使用await 有效的 总结 前言 在JavaScript的forEach方法中使用await是无效的&#xff0c;因为forEach方法不支持异步操作的等待。 forEach是一个数组的遍历方法&…

精要图示:园区金融数字化服务蓝图,以园区为支点推动信贷业务增长

作为企业集聚地&#xff0c;园区已然成为银行业夯实客群基础的重要切口&#xff0c;各大行陆续围绕园区场景创新金融产品&#xff0c;以期抢跑园区金融新赛道、把握新增量。 启信慧眼首推一站式【园区金融】数字化服务方案&#xff0c;该方案同时支持启信天元私有化部署&#x…

windows下git pull超时,ping不通github

报错 ssh: connect to host github.com port 22: Connection timed out fatal: Could not read from remote repository. Please make sure you have the correct access rights and the repository exists. 解决办法 修改hosts 最后加一行&#xff0c;文件位置&#xff1a;…

Kotlin Multiplatform项目推荐 | 太空人分布图

Kotlin Multiplatform项目推荐 | 太空人分布图 项目简介 Kotlin Multiplatform项目是一种跨平台开发技术&#xff0c;它可以同时使用SwiftUI、Jetpack Compose、Compose for Wear OS、Compose for Desktop、Compose for Web、Kotlin/JS React等客户端框架&#xff0c;并且使…

分表过多引起的问题/Apache ShardingSphere元数据加载慢

目录 环境 背景 探寻 元数据的加载策略 如何解决 升级版本到5.x 调大max.connections.size.per.query max.connections.size.per.query分析 服务启动阶段相关源码 服务运行阶段相关源码 受到的影响 注意事项&#xff08;重要&#xff09; 其他 环境 Spring Boot 2…

【linux】Debian防火墙

Debian系统默认没有安装防火墙&#xff0c;但用户可以根据需要自行选择并安装一个防火墙以增强系统安全性。 一、查看Debian 桌面系统的防火墙是否关闭 在Debian及其他基于Linux的桌面系统中&#xff0c;防火墙功能通常是由iptables或nftables规则集控制的&#xff0c;而ufw&…

docker容器启动后修改或添加端口 nacos容器 版本2.x需要额外开放9848、9849

1.输入docker ps -a查看需要修改的容器ID: 记录下、 docker ps -a 2.停止docker systemctl stop docker 3.进入docker 容器文件夹&#xff0c;找到对应容器的位置&#xff1a; docker的默认文件夹应该是/var/lib/docker 如果不是root用户查看的话&#xff0c;可能会出现权限…

LeetCode 热题 100 | 子串

目录 1 560. 和为 K 的子数组 2 239. 滑动窗口最大值 3 76. 最小覆盖子串 菜鸟做题第二周&#xff0c;语言是 C 1 560. 和为 K 的子数组 题眼&#xff1a;“子数组是数组中元素的连续非空序列。” 解决本问题的关键就在于如何翻译问题。子数组 s 的和可以看作数组 i 的…