v-if  v-else  v-show

v-if 根据表达式的值的真假条件渲染元素。

v-else 不需要表达式.前一兄弟元素必须有 v-if 或 v-else-if

v-show 根据表达式之真假值,切换元素的 display CSS 属性

v-for

基于源数据多次渲染元素或模板块。

v-text v-html

v-text 更新元素的 textContent。如果要更新部分的 textContent ,需要使用 {{ Mustache }} 插值。

v-html 更新元素的 innerHTML 。在网站上动态渲染任意 HTML 是非常危险的,因为容易导致 XSS 攻击

v-on

绑定事件监听器。

v-model

在表单控件或者组件上创建双向绑定

还有修饰符

  • .lazy - 取代 input 监听 change 事件
  • .number - 输入字符串转为数字
  • .trim - 输入首尾空格过滤

v-bind

动态地绑定一个或多个特性,或一个组件 prop 到表达式。

v-pre v-cloak v-once

v-pre 可以用来显示原始 Mustache 标签

v-clock 渲染完成后加载

v-once 只渲染元素和组件一次

directive 自义定指令

顾名思义 自己定义的指令

Vue.js指令实例的更多相关文章

  1. 第3章-Vue.js 指令扩展 和 todoList练习

    一.学习目标 了解Vue.js指令的实现原理 理解v-model指令的高级用法 能够使用Vue.js 指令完成 todoList 练习(重点+难点) 二.todoList练习效果展示 2.1.效果图展 ...

  2. Vue.js 教程 -- 实例讲解

    一. Vue.js是什么 Vue.js是一套构建用户界面(view)的MVVM框架.Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合. 1.1 Vue.js的目的 ...

  3. 第2章-Vue.js指令

    一.学习目标 了解 什么 是 Vue.js 指令 理解 Vue.js 指令的 用途 掌握 Vue.js 指令的书写规范 能够 使用 Vue.js 指令完成部门页面交互效果(难点和重点) 二.指令的基本 ...

  4. vue自定义指令实例使用(实例说明自定义指令的作用)

    在写vue项目的时候,我们经常需要对后台返回的数据进行大量的渲染操作,其中就包含了大量的对特殊数据的进一步处理,比如说时间戳.图片地址.特殊数据显示等等特殊数据处理改进. 其实遇到这种情况,通过Vue ...

  5. Vue.js + Seajs 实例(包含vue-router使用)

    这个Demo 相关JS: Sea.js : Version 2.3.0 seajs-text :  Version 2.3.0 vue.js : Version 1.0.24 vue-router: ...

  6. vue.js指令总结

    1.v-html 用于输出真正html,而不是纯文本. 2.v-text 输出纯文本. <!DOCTYPE html> <html lang="en"> & ...

  7. vue.js指令v-model实现方法

    原文链接:http://www.jb51.net/article/99097.htm V-MODEL 是VUE 的一个指令,在input 控件上使用时,可以实现双向绑定. 通过看文档,发现他不过是一个 ...

  8. 【前端】Vue.js实现实例搜索应用

    实例搜索应用 实现效果: 实现代码与注释: <!DOCTYPE html> <html> <head> <title>实例搜索</title> ...

  9. vue.js自定义指令详解

    写在文本前:相信在做vue的项目,你肯定接触了指令,我们常用vue内置的一些指令,比如v-model,v-text,v-if,v-show等等,但是这些内置指令不在本文的讲解范畴,本文想说的是其自定义 ...

随机推荐

  1. java日期转化,三种基本的日期格式

    import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...

  2. vue从入门到进阶:Vuex状态管理(十)

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 在 Vue 之后引入 vuex 会进行自动 ...

  3. Dynamics 365创建用户提示:您正在尝试使用已由其他用户使用的域登录来创建用户。如何解决。

    摘要: 本人微信公众号:微软动态CRM专家罗勇 ,回复287或者20181128可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me!我的网站是 www.luoyong.me ...

  4. MySQL 处理海量数据时的一些优化查询速度方法

    查询速度慢的原因 1.没有索引或者没有用到索引(这是查询慢最常见的问题,是程序设计的缺陷) 2.I/O 吞吐量小,形成了瓶颈效应. 3.没有创建计算列导致查询不优化. 4.内存不足 5.网络速度慢 6 ...

  5. Delphi Record To Stream

    type TUserInfo = record sUserId,sUserName:String; iUserCount:integer; end; procedure TForm1.Button1C ...

  6. 《常见排序算法--PHP实现》

    原文地址: 本文地址:http://www.cnblogs.com/aiweixiao/p/8202360.html Original 2018-01-02 关注 微信公众号 程序员的文娱情怀 1.概 ...

  7. 【English】20190418

    interested 感兴趣的[ˈɪntrəstɪd] arrange your time 安排自己时间[əˈreɪndʒ] If interested, please arrange your ti ...

  8. .NET CORE学习笔记系列(6)——KestrelServer

    原文:http://www.cnblogs.com/artech/p/KestrelServer.html 跨平台是ASP.NET Core一个显著的特性,而KestrelServer是目前微软推出了 ...

  9. Nginx 配置 和安装

    Nginx 博客 web服务器和web框架的关系 web服务器(nginx): 接收HTTP请求(例如www.pythonav.cn/xiaocang.jpg)并返回数据 web服务器,仅仅就是 接收 ...

  10. 手把手教你实现Android RecyclerView上拉加载功能

    摘要 一直在用到RecyclerView时都会微微一颤,因为一直都没去了解怎么实现上拉加载,受够了每次去Github找开源引入,因为感觉就为了一个上拉加载功能而去引入一大堆你不知道有多少BUG的代码, ...