v-if文本解释：
v-if：根据表达值的真假，切换元素的显示和隐藏（隐藏后 ， 源代码不存在）
代码解释：
<!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-if指令</title></head><body><div id="app"><!--以下操作实际效果同v-show相同 ， 但隐藏后在页面的展示栏中无法看到源代码，属于彻底隐藏--><input type="button" value="https://www.huyubaike.com/biancheng/切换显示" @click="toggleIsShow"><p v-if="isShow">河南师范大学</p><p v-show="isShow">河南师范大学 - v-show修饰</p><h2 v-if="temperature>=35">热死啦</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{isShow:false,temperature:20},methods: {toggleIsShow:function(){this.isShow = !this.isShow;}},})</script></body></html>v-bind文本解释：
v-bind：设置元素的属性（比如：src，title 。class）
代码解释：
<!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-bind指令</title><style>.active{border: 1px solid red;}</style></head><body><!--v-bind通常可以隐藏，直接写 :属性 即可--><div id="app"><!--这里采用v-bind设置页面图片--><img v-bind:src="http://img.zhejianglong.com/231018/1502103C3-13.jpg" ><br><!--这里采用v-bind略写方式?j?"https://www.huyubaike.com/tag/1905.html" target="_blank" class="yzm-keyword-link">vue9rumhtemdouWbvueJh++8jOWQjumdoumHh+eUqCBkYXRhIOWPmOmHj+aOp+WItuWbvueJh+Wxleekui0tJmd0OwogICAgICAgICZsdDshLS3lkIzmoLfph4fnlKh2LWJpbmTmjqfliLZ0aXRsZe+8jGNsYXNz562J5bGe5oCn77yM6YeH55So5LiJ5YWD6L+Q566X56ym5p2l5o6n5Yi2YWN0aXZlLS0mZ3Q7CiAgICAgICAgJmx0O2ltZyA6c3JjPQ=="imgSrc" :title="imgTitle+'!!!'" :class="isActive?'active':''" @click="toggleActive"><br><!--通过点击事件来控制class--><img :src="http://img.zhejianglong.com/231018/1502103C3-13.jpg" :title="imgTitle+'!!!'" :class="{active:isActive}" @click="toggleActive"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{imgSrc:"/uploads/allimg/231018/1502103031-19.png",imgTitle:"黑马程序员",isActive:false},methods: {toggleActive:function(){this.isActive = !this.isActive;}},})</script></body></html>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="http://img.zhejianglong.com/231018/150210O35-1.jpg"></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="http://img.zhejianglong.com/231018/150210O35-1.jpg"></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>
推荐阅读
- lol到底该怎么玩（lol各个位置该怎么玩)
- 英雄联盟怎么玩（英雄联盟英雄大全介绍)
- 如何创建自己的QQ群（1000人qq群创建条件)
- 手机QQ怎么创建群（手机qq咋建群)
- 如何申请建立一个QQ群（怎么创建一个满人qq群)
- 如何建立简单的QQ群（qq建立群)
- 如何创建qq群（qq怎么自己建群)
- 绝地求生怎么玩（绝地求生怎么玩手机版)
- 网吧怎么玩绝地求生（网吧绝地求生登录教程)
- 一篇文章让你搞懂Java中的静态代理和动态代理