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

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.lryc.cn/news/287882.html

相关文章:

  • 瀑布流布局 (初版)
  • 硕士毕业论文写作笔记
  • 成本更低、更可控,云原生可观测新计费模式正式上线
  • 5.列表选择弹窗(BottomListPopup)
  • (十三)Head first design patterns原型模式(c++)
  • Python基础之数据库操作
  • redis-发布缓存
  • Stata17安装教程
  • Java PDFBox 提取页数、PDF转图片
  • 【代码随想录14】104.二叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数
  • AWS 专题学习 P10 (Databases、 Data Analytics)
  • 一键拥有你的GPT4
  • 幻兽帕鲁服务器数据备份
  • 【Digester解析XML文件的三种方式】
  • MATLAB curve fitting toolbox没有怎么办?
  • Linux之快速入门(CentOS 7)
  • Spring框架中的设计模式
  • Java数据结构与算法:邻接矩阵和邻接表
  • 【温故而知新】JavaScript类、类继承、静态方法
  • 小黑艰难的前端啃bug之路:内联元素之间的间隙问题
  • Ubuntu 申请 SSL证书并搭建邮件服务器
  • 视频监控方案设计:EasyCVR视频智能监管系统方案技术特点与应用
  • pyspark.sql.types 中的类型有哪些
  • 开源CRM客户管理系统-FeelCRM
  • Linux创建新分区挂载后普通用户没有读写权限
  • 清越 peropure·AI 国内版ChatGP新功能介绍
  • 力扣1027. 最长等差数列
  • GraphicsMagick 的 OpenCL 开发记录(二十三)
  • 通过Android Logcat分析firebase崩溃
  • 【AI大模型】WikiChat超越GPT-4:在模拟对话中事实准确率提升55%终极秘密