浙江龙网

  1. 首页 > 生活百科 > >

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

生活百科

v-model文本解释：
v-model：实现双向绑定，便捷设置
代码解释：
<!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>v-model指令</title></head><body><div id="app"><!--点击按钮实现setM方法--><input type="button" value="https://www.huyubaike.com/biancheng/修改message" @click="setM"><!--我们将文本内容与message数据双向绑定--><!--当我们修改文本的值时，VsCode中的代码不会发生变化，但实际上message已经发生变化，我们将message的值单独列出来--><input type="text" v-model="message" @keyup.enter="getM"><!--当上述message发生改变时 ， message本身发生变化，那么调用它的显示值也发生变化--><h2>{{ message }}</h2></div><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{message:"河南师范大学"},methods: {getM:function(){alert(this.message);},setM:function(){this.message ="软件学院";}},})</script></body></html>案例：计算器下面我们通过一个案例来巩固前面所学习的一些知识点
案例要求：

  • 我们希望通过"-"和"+"控制中间数字的大?。ㄗ钚∥?，最大为10）
知识点复习：
  • 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://img.zhejianglong.com/231018/1502103031-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="http://img.zhejianglong.com/231018/150210O35-1.jpg"></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="http://img.zhejianglong.com/231018/150210O35-1.jpg"></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>

推荐阅读


上一篇：1.2.2 musl pwn

下一篇：1 Java I/O：模型与流