Vue.js常用指令汇总(v-if、v-for等)


Posted in Javascript onNovember 03, 2016

有时候指令太多会造成记错、记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错。

本文主要讲了一下六个指令:

v-if//v-show//v-else//v-for//v-bind//v-on

1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素;

eg: 

HTML:

<div id="example01">
 <p v-if="male">Male</p>
 <p v-if="female">Female</p>
 <p v-if="age>25">Age:{{age}}</p>
 <p v-if="name.indexOf('lin')>0">Name:{{name}}</p>
</div>

JS:

var vm= new Vue({
 el:"#example01",
 data:{
 male:true,
 female: false,
 age:29,
 name:'colin'
 }
 })

页面渲染效果:

Vue.js常用指令汇总(v-if、v-for等)

所以,v-if指令只渲染他身后表达式为true的元素;在这里引入v-show指令,因为二者的区别是v-show指令会渲染他身后表达式为false的元素,这样的元素上会添加css代码:style="display:none"; 将上面v-if的实例代码改为v-show,页面渲染效果为:

Vue.js常用指令汇总(v-if、v-for等) 

2, v-showv-if类似,只是会渲染其身后表达式为false的元素,而且会给这样的元素添加css代码:style="display:none";

3, v-else 必须跟在v-if/v-show指令之后,不然不起作用;

如果v-if/v-show指令的表达式为true,则else元素不显示;如果v-if/v-show指令的表达式为false,则else元素显示在页面上;

eg:

<div id="app">
<h1 v-if="age >= 25">Age: {{ age }}</h1>
<h1 v-else>Name: {{ name }}</h1>
<hr>
<h1 v-show="name.indexOf('cool') = 0">Name: {{ name }}</h1>
<h1 v-else>Sex: {{ sex }}</h1>
</div>
<script>
 var vm = new Vue({
 el: '#app',
 data: {
 age: 21,
 name: 'keepcool',
 sex: 'Male'
 }
 })
</script>

4, v-for  类似JS的遍历,用法为 v-for="item in items", items是数组,item为数组中的数组元素。

eg:

CSS:

<style>
table,th,tr,td{
 border:1px solid #ffcccc;
 border-collapse: collapse;
 }
</style>

HTML:

<div id="example03">
 <table>
 <thead>
 <tr>
 <th>Name</th>
 <th>Age</th>
 <th>Sex</th>
 </tr>
 </thead>
 <tbody>
 <tr v-for="person in people">
 <td>{{ person.name }}</td>
 <td>{{ person.age }}</td>
 <td>{{ person.sex }}</td>
 </tr>
 </tbody>
 </table>
</div>

JS:

<script>
 var vm = new Vue({
 el: '#example03',
 data: {
 people: [{
 name: 'Jack',
 age: 30,
 sex: 'Male'
 }, {
 name: 'Bill',
 age: 26,
 sex: 'Male'
 }, {
 name: 'Tracy',
 age: 22,
 sex: 'Female'
 }, {
 name: 'Chris',
 age: 36,
 sex: 'Male'
 }]
 }
 })
</script>

页面效果:

 Vue.js常用指令汇总(v-if、v-for等)

5, v-bind  这个指令用于响应地更新 HTML 特性,比如绑定某个class元素或元素的style样式。

eg,分页功能中当前页数高亮的效果,可以使用bind指令。

<ul class="pagination">
 <li v-for="n in pageCount">
  <a href="javascripit:void(0)" v-bind:class="activeNumber === n + 1 ? 'active' : ''">{{ n + 1 }}</a>
 </li>
 </ul>

 6, v-on  用于监听指定元素的DOM事件,比如点击事件。

eg:

<div id="example04">
 <input type="text" v-model="message">
 <button v-on:click="greet">Greet</button>
 <!-- v-on指令可以缩写为@符号-->
 <button @click="greet">Greet Again</button>
 </div>
<script>
 var exampleData04={
 message:"Nice meeting U"
 };
 var vm2=new Vue({
 el:"#example04",
 data:exampleData04,
 methods:{
 greet:function(){
 alert(this.message);
 }
 
 }
 })
</script>

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 触发HTML元素绑定的函数
Sep 11 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
javascript实现信息的显示和隐藏如注册页面
Dec 03 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
Sep 17 Javascript
基于JS实现类似支付宝支付密码输入框
Sep 02 Javascript
Angular 中 select指令用法详解
Sep 29 Javascript
jQuery Validate 数组 全部验证问题
Jan 12 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 Javascript
js实现蒙版效果
Jan 11 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 #Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 #Javascript
探索Vue.js component内容实现
Nov 03 #Javascript
javascript跨域请求包装函数与用法示例
Nov 03 #Javascript
预防网页挂马的方法总结
Nov 03 #Javascript
网页挂马方式整理及详细介绍
Nov 03 #Javascript
AngularJS实现在ng-Options加上index的解决方法
Nov 03 #Javascript
You might like
PHP音乐采集(部分代码)
2007/02/14 PHP
Discuz! 5.0.0论坛程序中加入一段js代码,让会员点击下载附件前自动弹出提示窗口
2007/04/18 PHP
php mssql 分页SQL语句优化 持续影响
2009/04/26 PHP
php将会员数据导入到ucenter的代码
2010/07/18 PHP
PHP中怎样保持SESSION不过期 原理及方案介绍
2013/08/08 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
PHPStrom 新建FTP项目以及在线操作教程
2016/10/16 PHP
JQuery一种取同级值的方式(比如你在GridView中)
2012/03/15 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
Ext4.2的Ext.grid.plugin.RowExpander无法触发事件解决办法
2014/08/15 Javascript
jQuery简单实现QQ空间点赞已经取消点赞
2015/04/02 Javascript
详解JavaScript基于面向对象之创建对象(1)
2015/12/10 Javascript
详解JavaScript数组和字符串中去除重复值的方法
2016/03/07 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
详解Angular.js的$q.defer()服务异步处理
2016/11/06 Javascript
微信小程序 使用腾讯地图SDK详解及实现步骤
2017/02/28 Javascript
webpack搭建vue 项目的步骤
2017/12/27 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
2018/09/27 Javascript
JavaScript获取页面元素的常用方法详解
2019/09/28 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
使用python检测手机QQ在线状态的脚本代码
2013/02/10 Python
Python多线程实例教程
2014/09/06 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
如何基于python操作excel并获取内容
2019/12/24 Python
python 实现简单的计算器(gui界面)
2020/11/11 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
导游实习生自荐书
2014/01/28 职场文书
主管会计岗位责任制
2014/02/10 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
学生检讨书范文
2019/06/24 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
Java8中接口的新特性使用指南
2021/11/01 Java/Android
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android