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遍历控件实例详细解析
Jan 10 Javascript
JavaScript 面向对象与原型
Apr 10 Javascript
javascript动态获取登录时间和在线时长
Feb 25 Javascript
Bootstrap组件之下拉菜单,多级菜单及按钮布局方法实例
May 25 Javascript
Ionic2开发环境搭建教程
Aug 20 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
Vue.js添加组件操作示例
Jun 13 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
Jun 13 Javascript
jQuery实现判断滚动条滚动到document底部的方法分析
Aug 27 jQuery
Vue实例的对象参数options的几个常用选项详解
Nov 08 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 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
openPNE常用方法分享
2011/11/29 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
php图像处理类实例
2015/07/28 PHP
PHP 获取客户端 IP 地址的方法实例代码
2018/11/11 PHP
php使用goto实现自动重启swoole、reactphp、workerman服务的代码
2020/04/13 PHP
找到一点可怜的关于dojo资料,谢谢作者!
2006/12/06 Javascript
Javascript 实用小技巧
2010/04/07 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
一个jquery实现的不错的多行文字图片滚动效果
2014/09/28 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
jQuery使用append在html元素后同时添加多项内容的方法
2015/03/26 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
2015/09/25 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
javascript关于“时间”的一次探索
2019/07/24 Javascript
js实现选项卡效果
2020/03/07 Javascript
python使用epoll实现服务端的方法
2018/10/16 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
C#的几个面试问题
2016/05/22 面试题
大学生专科毕业生自我评价
2013/11/17 职场文书
高中军训感言800字
2014/03/05 职场文书
就业推荐表自我鉴定范文
2014/03/21 职场文书
工程项目经理任命书
2014/06/05 职场文书
机械工程及其自动化专业求职信
2014/08/08 职场文书
群众路线党员个人剖析材料
2014/10/08 职场文书
房屋出售授权委托书
2014/10/12 职场文书
化验员岗位职责
2015/02/14 职场文书
土建施工员岗位职责
2015/04/11 职场文书
只需要12页,掌握撰写一流商业计划书的技巧
2019/05/07 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
使用pandas模块实现数据的标准化操作
2021/05/14 Python