1、v-if：判断是否隐藏

2、v-for：数据循环

3、v-bind:class：绑定一个属性

4、v-model:实现数据双向绑定

这里重点说明一个v-if和v-show的区别：

共同点：都是通过判断绑定数据的true/false来展示的

不同点：v-if只有在判断为true的时候才会对数据进行渲染，如果为false代码删除。除非再次进行数据渲染，v-if才会重新判断。可以说是用法比较倾向于对数据一次操作。
　　　　v-show是无论判断是什么都会先对数据进行渲染，只是false的时候对节点进行display:none;的操作。所以再不重新渲染数据的情况下，改变数据的值可以使数据展示或隐藏

4种vue当中的指令和它的用法的更多相关文章

  1. Vue基础01vue的基本示例，vue的双向数据绑定，vue中常见的几种用法，vue相关常见指令

    自学vue框架,每天记录重要的知识点,与大家分享!有不足之处,希望大家指正. 本篇将讲述:vue的基本示例,vue的双向数据绑定,vue中常见的几种用法,vue相关常见指令 前期学习基础,使用vue. ...

  2. Vue.js自定义指令的用法与实例

    市面上大多数关于Vue.js自定义指令的文章都在讲语法,很少讲实际的应用场景和用例,以致于即便明白了怎么写,也不知道怎么用.本文不讲语法,就讲自定义指令的用法. 自定义指令是用来操作DOM的.尽管Vu ...

  3. vue的基本指令

      1.创建vue对象 <script src="vue.js"></script> var vm = new Vue({     el:"#ap ...

  4. Vue(九) 自定义指令

    前面介绍了许多 Vue 内置的指令,比如 v-if.v-show等,这些丰富的指令能满足我们绝大部分的业务需求,不过在需要一些特殊功能时,我们仍然希望对 DOM 进行底层的操作,这时就要用到自定义指令 ...

  5. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  6. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  7. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  8. Vue中插槽指令

    08.29自我总结 Vue中插槽指令 意义 就是在组件里留着差值方便后续组件内容新增 而且由于插件是写在父级中数据可以直接父级中传输而不需要传子再传父有些情况会减少写代码量 示例 <div id ...

  9. Vue基础系列（四）——Vue中的指令（上）

    写在前面的话: 文章是个人学习过程中的总结,为方便以后回头在学习. 文章中会参考官方文档和其他的一些文章,示例均为亲自编写和实践,若有写的不对的地方欢迎大家和我一起交流. VUE基础系列目录 < ...

随机推荐

  1. EL表达式里面不能直接使用list.size()得到长度，

    在jsp页面中不能通过${list.size}取列表长度, 而是 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pre ...

  2. JS Generator yield

    function show() { console.log('a') console.log('b') } show() // 普通函数 function *show2() { console.log ...

  3. 20175215 2018-2019-2 第五周java课程学习总结

    第六章学习内容 1.接口 使用interface来定义一个接口. 接口体中包含常量的声明(没有变量)和抽象方法两部分.接口体中只有抽象方法,没有普通的方法,而且接口体中所有的常量的访问权限一定都是pu ...

  4. vultr云主机充10美元送50美元

    目录 注册地址: 如何收费? 停止状态的实例是否收费? 有哪些支付方式? 提供哪些操作系统? 注册地址: https://www.vultr.com/?ref=8199131 如何收费? 按小时计费, ...

  5. LeetCode 92. 反转链表 II（Reverse Linked List II）

    题目描述 反转从位置 m 到 n 的链表.请使用一趟扫描完成反转. 说明: 1 ≤ m ≤ n ≤ 链表长度. 示例: 输入: 1->2->3->4->5->NULL, ...

  6. JAVA-retry 重试

    在看 ThreadPoolExecutor 源码时看到这么一段代码 retry: for (;;) { int c = ctl.get(); int rs = runStateOf(c); // Ch ...

  7. Spring配置多个数据源，并实现数据源的动态切换转载）

    1.首先在config.properties文件中配置两个数据库连接的基本数据.这个省略了 2.在spring配置文件中配置这两个数据源: 数据源1 <!-- initialSize初始化时建立 ...

  8. 鬼知道NOI会不会成为下一个奥数

    认真写作文不可能的,这辈子不可能认真写作文的. (月考,期末考,高考即将到达战场,真香警告) 以下应该成为原稿!!! 真.喜欢写感悟,但我感觉我可能把它写的有点商业化,商业化的文章不可能放的,所以我尽 ...

  9. MobileNetV2: Inverted Residuals and Linear Bottlenecks

    1. 摘要 作者提出了一个新的网络架构 MobileNetV2,该架构基于反转残差结构,其中的跳跃连接位于较瘦的瓶颈层之间.中间的扩展层则利用轻量级的深度卷积来提取特征引入非线性,而且,为了维持网络的 ...

  10. MPP - GreenPlum数据库安装以及简单使用

    一.集群介绍 共3台主机,ip 为193.168.0.93   193.168.0.94  193.168.0.95 集群对应master和segment如下,193.168.0.93为master节 ...