<!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>data:数据对象</title></head><body><div id="app"><!--使用{{}}调用data数据-->{{ message }}<!--对象采用.来调用内部元素--><h2> {{ school.name }} {{ school.mobile }}</h2><ul><!--数组采用[index]来选择内部元素--><li>{{ campus[0] }}</li><li>{{ campus[3] }}</li></ul></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{message:"你好!",school:{name:"河南师范大学",mobile:"0373-3325000"},campus:["东校区","西校区","新乡校区","平原湖校区"]}})</script></body></html>Vue本地应用在介绍了Vue的基本使用后，我们针对Vue内部的各种属性方法来做出一一介绍
每条属性或方法我们都会给出解释和相关案例
v-text文本解释：
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>v-text指令</title></head><body><div id="app"><!--我们采用v-text来设置标签内文本 ， 注意会覆盖掉内部文本 ， “深圳”将不再显示--><h2 v-text="message+'!'">深圳</h2><h2 v-text="info+'!'">深圳</h2><!--另一种文本书写方式{{}}--><h2>{{ message +'!'}}深圳</h2></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{message:"河南师范大学",info:"软件学院"}})</script></body></html>v-html文本解释：
v-html：以html的格式来设置标签的文本值
代码解释：
<!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-html指令</title></head><body><!--v-html:设置元素的innerHTML--><!--采用v-html后显示的是河南师范大学的加粗版，但采用v-text后显示的是<strong>河南师范大学</strong>--><div id="app" v-html="context"></div><!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{content:"<strong>河南师范大学</strong>"}})</script></body></html>v-on文本解释：
v-on：为元素绑定事件，可以采用@代替
代码解释：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>v-on</title></head><body><div id="app"><!--v-on：后面跟事件名 用于绑定事件 可以用@代替 后面用methods中的方法即可--><input type="button" value="https://www.huyubaike.com/biancheng/点击" v-on:click="doIt"><input type="button" value="https://www.huyubaike.com/biancheng/点击" @click="doIt"></div><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",methods:{doIt:function(){alert("河南师范大学");}}})</script></body></html>v-show文本解释：
v-show：根据表达值的真假，切换元素的显示和隐藏（隐藏后源代码仍存在）
代码解释：
<!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-show指令</title></head><body><div id="app"><!--点击后改变isShow的值，将isShow变为true或false ， 以此控制img的显示与隐藏--><input type="button" value="https://www.huyubaike.com/biancheng/切换显示状态" @click="changeIsShow"><!--点击增加年龄值--><input type="button" value="https://www.huyubaike.com/biancheng/累加年龄" @click="addAge"><!--v-show用于控制元素的存在或隐藏，这里采用isShow变量，根据isShow的值来判断是否存在--><img v-show="isShow" src="https://www.huyubaike.com/biancheng/img/monkey.gif" ><!--根据年龄值大小控制元素的存在或隐藏 ， 只是为了表示v-show的参数需要是一个true或false的判定--><img v-show="age>=18" src="https://www.huyubaike.com/biancheng/img/monkey.gif" ></div><script src="http://img.zhejianglong.com/231018/150210O35-1.jpg"></script><script>var app = new Vue({el:"#app",data:{isShow:false,age:17},methods: {// 进行 isShow 的true或false更改changeIsShow:function(){this.isShow = !this.isShow;},addAge:function(){this.age++;}},})</script></body></html>
推荐阅读
- lol到底该怎么玩（lol各个位置该怎么玩)
- 英雄联盟怎么玩（英雄联盟英雄大全介绍)
- 如何创建自己的QQ群（1000人qq群创建条件)
- 手机QQ怎么创建群（手机qq咋建群)
- 如何申请建立一个QQ群（怎么创建一个满人qq群)
- 如何建立简单的QQ群（qq建立群)
- 如何创建qq群（qq怎么自己建群)
- 绝地求生怎么玩（绝地求生怎么玩手机版)
- 网吧怎么玩绝地求生（网吧绝地求生登录教程)
- 一篇文章让你搞懂Java中的静态代理和动态代理