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. centos6 yum安装mysql 5.6 (完整版)

    使用源代码编译安装mysql还是比较麻烦,一般来说设备安装时请网络同事临时开通linux上网,通过yum网络实现快速安装,或配置yum仓库进行内网统一安装. 通过网络快速安装过程如下 一.检查系统是否 ...

  2. Git-Runoob：Git 查看提交历史

    ylbtech-Git-Runoob:Git 查看提交历史 1.返回顶部 1. Git 查看提交历史 在使用 Git 提交了若干更新之后,又或者克隆了某个项目,想回顾下提交历史,我们可以使用 git ...

  3. git提交到分支

    git checkout grego@gregoo:mygo$ git checkout origin/test Note: checking out 'origin/test'. You are i ...

  4. python threading.current_thread().name和.getName()有什么区别

    今天学到python多线程这块,想显示当前线程是主线程还是子线程.网上一搜,有个方法叫 threading.current().name 定海偶然 但是发现,同样的threading.current_ ...

  5. PHP结合Ueditor并修改图片上传路径 微信小程序 拼接域名显示图片

    前言 在使用UEditor编辑器时,一般我们都是需要修改默认的图片上传路径的,下面是我整理好的修改位置和方法供大家参考. 操作 Ueditor PHP版本本身自带了一套上传程序,我们可以在此基础中,找 ...

  6. properties文件的加载方式

    下面1-4的内容是网上收集的相关知识,总结来说,就是如下几个知识点: 最常用读取properties文件的方法 InputStream in = getClass().getResourceAsStr ...

  7. Flex TabNavigator

    1.获取子项个数 TabNavigator.numChildren(int) 2.对于静态的TabNavigator的如何处理权限显示 for(var i:int=0;i <tab.numChi ...

  8. 微信小程序UI学习

    1.大纲: 2.flex的布局: 3.相对定位和绝对定位: position: relative   相对定位 position: absolute  绝对定位

  9. [深度概念]·Attention Model（注意力模型）学习笔记

    此文源自一个博客,笔者用黑体做了注释与解读,方便自己和大家深入理解Attention model,写的不对地方欢迎批评指正.. 1.Attention Model 概述 深度学习里的Attention ...

  10. Conetos 下安装docker 和镜像加速

    首先升级yum yum update 安装yum-utils,它提供yum-config-manager可以用来配置repo yum install -y yum-utils 使用以下命令设置稳定版 ...