经验总结

  1. 首页 > 生活 > >

一篇文章带你了解网页框架——Vue简单入门( 五 )

生活百科


  • EL挂载点，Data数据，Methods方法
  • v-on，v-text方法
代码展示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>计算器</title><!--css配置--><style>#app {width: 480px;height: 100px;margin: 200px auto;}.input-num {margin-top: 20px;height: 100%;display: flex;border-radius: 10px;overflow: hidden;box-shadow: 0 0 4px black;}.input-num button {width: 150px;height: 100%;font-size: 40px;color: gray;cursor: pointer;border: none;outline: none;}.input-num span {height: 100%;font-size: 40px;flex: 1;text-align: center;line-height: 100px;}</style></head><body><!--index主页--><!--设置Vue的id绑定--><div id="app"><img src="http://shimg.jingyanzongjie.com/230726/02560054H-19.png" /><!-- 计数器 --><div class="input-num"><!--绑定事件sub--><button @click="sub"> - </button><!--数字展示--><span>{{ num }}</span><!--绑定事件add--><button @click="add"> + </button></div></div></body></html><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- 编码 --><script>/*1. data中定义num属性,类型是数字,渲染到2个按钮中间2. 减号绑定点击事件,对应的方法名叫sub,大于0之前递减3. 加号绑定点击事件,对应的方法名叫add,小于0之前累加*/// 创建Vue实例var app = new Vue({el: "#app",data: {// 修改的数字num:1},methods: {// 减sub:function(){// 递减if(this.num>0){this.num--;}else{alert("数字最小为0");}},// 加add:function(){// 累加if(this.num<10){this.num++;}else{alert("数字最大为10");}}}});</script>案例：图片切换下面我们通过一个案例来巩固前面所学习的一些知识点
案例要求：
  • 我们通过点击左右两边的图片切换符号来切换中间图片
知识点复习：
  • EL挂载点，Data数据，Methods方法
  • v-on，v-show，v-bind方法
代码展示：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>Document</title><!--css样式在下面单列--><link rel="stylesheet" href="https://www.huyubaike.com/biancheng/css/index.css" /></head><body><div id="mask"><div class="center"><h2 class="title"><img src="https://www.huyubaike.com/biancheng/images/logo.png" > 学校环境 </h2><!--展示?j?"https://www.huyubaike.com/tag/1905.html" target="_blank" class="yzm-keyword-link">vueJh++8jOWIh+aNoueahOS4reW/g+eCuS0tJmd0OwogICAgICAgICZsdDtpbWcgOnNyYz0="imgList[index]" /><!--左转图片--><!--添加绑定事件prev，用于图片的切换--><!--添加v-show，当左侧无图片时，隐藏--><ahref="javascript:void(0)"@click="prev"class="left"v-show="index>0"><img src="https://www.huyubaike.com/biancheng/images/prev.png" /></a><!--右转图片--><!--添加绑定事件right，用于图片的切换--><!--添加v-show，当右侧无图片时，隐藏--><ahref="javascript:void(0)"@click="next"class="right"v-show="index<imgList.length-1"><img src="https://www.huyubaike.com/biancheng/images/next.png" /></a></div></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>const app = new Vue({el: "#mask",data: {// 图片元素imgList: ["./images/00.jpg","./images/01.jpg","./images/02.jpg","./images/03.jpg","./images/04.jpg","./images/05.jpg","./images/06.jpg","./images/07.jpg","./images/08.jpg","./images/09.jpg","./images/10.jpg",],// 图片序号index: 0},methods: {// 上一张prev() {this.index--;},// 下一张next() {this.index++;}}});</script></body></html>

经验总结扩展阅读


上一篇：2023年2月9日拜观音黄道吉日 2023年农历正月十九宜拜观音吗

下一篇：2023年农历正月十九宜求神拜佛吗 2023年农历正月十九求神拜佛吉日