经验总结

  1. 首页 > 生活 > >

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

生活百科

v-for文本解释：
v-for：根据数据生成列表结构
代码解释：
<!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-for指令</title></head><body><div id="app"><!--简单的添加删除操作，针对h2的数据--><input type="button" value="https://www.huyubaike.com/biancheng/添加数据" @click="add"><input type="button" value="https://www.huyubaike.com/biancheng/移除数据" @click="remove"><ul><!--简单v-for，参数为（数据名称[任起]，下标[index]） in data数组--><li v-for="(it,index) in arr"><!--在内部，可以使用数据名称和下标值-->{{ index+1 }}城市推荐:{{ it }}</li></ul><!--数组中装有对象也是同样的使用方法--><h2 v-for="item in vegetables" v-bind:title="item.name">{{ item.name }}</h2></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{arr:["北京","上海","广州","深圳"],vegetables:[{name:"鱼"},{name:"鸡"}]},methods: {add:function(){this.vegetables.push({ name:"红烧鱼" });},remove:function(){this.vegetables.shift();}},})</script></body></html>v-on+文本解释：
v-on+：补充v-on的部分知识点
代码解释：
<!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-on补充</title></head><body><div id="app"><!--方法中可以携带参数，正常调用即可--><input type="button" value="https://www.huyubaike.com/biancheng/点击" @click="doIt(666,'老铁')"><!--可以选取事件的部分事件做反应，例如@keyup.enter就是点击enter键生效，我们通常采用"."来表示事件限制--><input type="text" @keyup.enter="sayHi"></div><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",methods: {doIt:function(p1,p2){console.log("做it");console.log(p1);console.log(p2);},sayHi:function(){alert("吃了没");}},})</script></body></html>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="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script>var app = new Vue({el:"#app",data:{message:"河南师范大学"},methods: {getM:function(){alert(this.message);},setM:function(){this.message ="软件学院";}},})</script></body></html>案例：计算器下面我们通过一个案例来巩固前面所学习的一些知识点
案例要求：

  • 我们希望通过"-"和"+"控制中间数字的大小（最小为0，最大为10）
知识点复习：

经验总结扩展阅读


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

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