Vue基础系列（五）——Vue中的指令（中）
写在前面的话：
文章是个人学习过程中的总结，为方便以后回头在学习。
文章中会参考官方文档和其他的一些文章，示例均为亲自编写和实践，若有写的不对的地方欢迎大家和我一起交流。
VUE基础系列目录
一.v-model
v-model是作用于input/textarea等表单控件的双向数据绑定指令，当我们修改表单元素的内容，会自动的更新vue中的数据
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<input v-model='msg' type='text'/>
<br>
这里是msg的值：{{msg}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
msg: 'hello'
}
});
</script>
</body>
</html>
#结果
我们可以清楚的看到，当我们改变了input输入框的内容时，数据自动的更新到了msg中，相应的输入框下方的的值也发生了变化，这就是v-model的特性。
二.v-show
v-show称为vue中的条件渲染，它可以控制元素的隐藏和显示：通过元素的display属性值去控制。用法也比较简单，我们直接看示例。
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id='box'>
<h1 v-show='hideValue'>我是一段文本，会被隐藏</h1>
<h1 v-show='showValue'>我是一段文本，会正常显示</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
showValue: true,
hideValue: false
}
});
</script>
</body>
</html>
#结果
可以看到，当v-show中的表达式的值为真时，文本会正常显示；为假时，元素会添加一个内联元素：display:none;
注意：在javascript中，表达式的条件为真不只是它的值为true，为假的也不一定是false。
三.v-if / v-else /v-else-if
v-if也是属于vue中的条件渲染指令，作用同v-show一样用于控制元素的显示和隐藏，不一样的是v-if的javascript表达式为假时，元素不会存在于DOM文档中的。
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<h1 v-if='isDisplay'>isDisplay为真</h1>
<h1 v-if='hideValue'>hideValue为假,该元素不会显示在界面上,也不会出现在DOM文档中</h1>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
isDisplay: true,
hideValue: false
}
})
</script>
</body>
</html>
#结果
可以看到hideValue为假，所以对应的h1元素并没有存在于DOM文档中。
四.v-for
v-for指令用于循环渲染一组数据（数组或者对象）。下面我们使用v-for指令输入一下数组和对象的值。
#v-for循环数组
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<ul>
<li v-for='item in arr'>
{{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: ['今天','起床','很早','心情','不错']
}
})
</script>
</body>
</html>
v-for除了循环出每一个数组元素item之外，还支持第二个参数作为数组的下标。
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body> <div id="box">
<ul>
<li v-for='(item,index) in arr'>下标为{{index}}的数据为：{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: ['今天','起床','很早','心情','不错']
}
})
</script>
</body>
</html>
#v-for循环对象
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<!-- 循环对象：第一种 -->
<ul>
<li v-for='item in obj'>{{item}}</li>
</ul> <!-- 循环对象：第二种 -->
<ul>
<li v-for='(item,key) in obj'>{{key}}:{{item}}</li>
</ul> </div> <script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
arr: ['今天','起床','很早','心情','不错'],
obj:{
name: 'test',
age: 20,
desc: '坚持就是苦逼'
}
}
})
</script>
</body>
</html>
五.v-on
v-on指令用于监听元素的事件，在事件触发时，可以执行一个javascript表达式或者执行一个javascript函数。
#基本的语法
<el on:click="javascript表达式或者javascript函数"> </el>
或者
<el @click="javascript表达式或者javascript函数"> </el>
#示例
<!DOCTYPE html>
<html>
<head>
<title>vue中的指令(中)</title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="box">
<button v-on:click="clickMe">点击我,我会调用一个函数</button>
<hr>
<button v-on:click="counter++">点击我,count就会加1</button>
<p>counter = {{counter}}</p>
<hr>
v-on:的另外一种写法@click
<button @click="counter++">点击我,count就会加1</button>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#box',
data: {
counter: 0
},
methods: {
clickMe: function(){
// 事件对象
console.log(event);
// 事件绑定的元素
console.log(event.target); }
}
})
</script>
</body>
</html>
六.总结
- v-model指令作用于表单控件，有双向数据绑定的效果
- v-show为条件渲染指令用于控制元素的隐藏和显示：通过元素的display属性值去控制
- v-if/v-else/v-else-if为条件渲染指令用于控制元素的隐藏和显示：v-if的javascript表达式为假时，元素不会存在于DOM文档中
- v-on指令用于监听元素的事件
Vue基础系列（五）——Vue中的指令（中）的更多相关文章
- Vue基础系列（四）——Vue中的指令（上）
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（三）——Vue模板中的数据绑定语法
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...
- Vue基础系列（二）——Vue中的methods属性
写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家指出. 作者简介: 一个不知名的前端开发 ...
- 【C++自我精讲】基础系列五 隐式转换和显示转换
[C++自我精讲]基础系列五 隐式转换和显示转换 0 前言 1)C++的类型转换分为两种,一种为隐式转换,另一种为显式转换. 2)C++中应该尽量不要使用转换,尽量使用显式转换来代替隐式转换. 1 隐 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十七 ║Vue基础：使用Vue.js 来画博客首页+指令(一)
缘起 书说前两篇文章<十五 ║ Vue前篇:JS对象&字面量&this>和 <十六 ║ Vue前篇:ES6初体验 & 模块化编程>,已经通过对js面向对 ...
- Vue基础（环境配置、内部指令、全局API、选项、内置组件）
1.环境配置 安装VsCode 安装包管理工具:直接下载 NodeJS 进行安装即可,NodeJS自带 Npm 包管理工具,下载地址:https://nodejs.org/en/download/安装 ...
- Vue基础之初识Vue
Vue特点及优点 小巧,压缩后体积17KB: 渐进式,不需要一口吃成大胖子,一上来就用所有的东西,可以一步一步.有阶段的先吃成小胖子: 数据驱动,双向数据绑定,MVVM模式,详见下一段 指令,例如v- ...
- web基础系列(五)---https是如何实现安全通信的
https是如何实现安全通信的 如果有不正确的地方,还望指出! web基础系列目录 总结几种常见web攻击手段极其防御方式 总结几种常见的安全算法 回顾 总结几个概念(具体描述可以看上一篇文章) 数字 ...
- 夯实Java基础系列10：深入理解Java中的异常体系
目录 为什么要使用异常 异常基本定义 异常体系 初识异常 异常和错误 异常的处理方式 "不负责任"的throws 纠结的finally throw : JRE也使用的关键字 异常调 ...
随机推荐
- Ubuntu中使用Nginx+rtmp模块搭建流媒体视频点播服务
1. 背景 不知不觉笔者来到流媒体部门已经一年半多了,积攒了不少的流媒体知识,但平时工作也比较忙,很少进行总结性的梳理,最近准备花几个周末时间写一个流媒体系列的实践文章,也算是给自己做总结的同时帮助有 ...
- django ListView
context_object_name = 'posts'. The template default name is ListView 'object_list' from .models impo ...
- Rust中的RefCell和内部可变性
RefCell Rust在编译阶段会进行严格的借用规则检查,规则如下: 在任意给定时间,要么只能有一个可变引用,要么只能有多个不可变引用. 引用必须总是有效. 即在编译阶段,当有一个不可变值时,不能可 ...
- Xtrabackup 全备和还原以及增量备份和还原
目录 MySQL环境介绍 全备和还原 准备备份目录 创建测试数据 全量备份 模拟删除数据 还原数据操作 第一步 备份备份文件 第二步 关闭数据库 第三步 移除数据库的data目录 第四步 恢复前准备 ...
- 运维常用 MySQL 命令
目录 设置用户密码 方法一 方法二 丢失root密码找回 添加用户 设置用户密码 方法一 SET PASSWORD FOR 'root'@'localhost' = PASSWORD('NewPass ...
- 学习WebFlux时常见的问题
前言 只有光头才能变强. 文本已收录至我的GitHub精选文章,欢迎Star:https://github.com/ZhongFuCheng3y/3y 回顾一下上篇我对WebFlux的入门,如果没读过 ...
- 通过哪吒动漫豆瓣影评，带你分析python爬虫与BeautifulSoup快速入门【华为云技术分享】
久旱逢甘霖 西安连着几天温度排行全国三甲,也许是<哪吒之魔童降世>的剧组买通了老天,从踩着风火轮的小朋友首映开始,就全国性的持续高温,还好今天凌晨的一场暴雨,算是将大家从中暑边缘拯救回来了 ...
- 是时候考虑让你的Spark跑在K8S上了
[摘要] Spark社区在2.3版本开始,已经可以很好的支持跑着Kubernetes上了.这样对于统一资源池,提高整体资源利用率,降低运维成本(特别是技术栈归一)有着非常大的帮助.这些趋势是一个大数据 ...
- Spring Quartz定时任务设置
这里主要记录一下定时任务的配置,偏向于记录型的一个教程,这里不阐述Quartz的原理. 首先,在Spring配置文件里配置一个自己写好的一个包含执行任务方法的一个类. <bean id=&quo ...
- luogu P4408 [NOI2003]逃学的小孩
题目描述 Chris家的电话铃响起了,里面传出了Chris的老师焦急的声音:"喂,是Chris的家长吗?你们的孩子又没来上课,不想参加考试了吗?"一听说要考试,Chris的父母就心 ...