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. Windchill基本业务对象-文档

    文档的类型: (1)WTDocumetManster :是文档的主要信息,一个文档只有一条记录:(2)WTDocument:是文档小版本记录,每一个文档小版本都有一条记录: 备注:(1)文档大版本记录 ...

  2. python浅拷贝和深拷贝

    博文参考地址:https://blog.csdn.net/qq_20084101/article/details/82925067 最近在撸码的时候发现了一个严重的问题: a = [1,2] c = ...

  3. Linux 访问控制列表(access control list)

    简介 随着应用的发展,传统的linux文件系统权限控制无法适应复杂的控制需求,而ACL的出现,则是为了扩展linux的文件权限控制,以实现更为复杂的权限控制需求.其可以针对任意的用户和用户组进行权限分 ...

  4. RHEL6 SoftRaid 更换故障硬盘

    1.手工fail一块硬盘 #mdadm /dev/md0 -f /dev/sdb 2.移除损坏硬盘: #mdadm /dev/md0 -r /dev/sdb 3.添加新的硬盘到已有阵列 mdadm / ...

  5. LeetCode算法题-Non-decreasing Array(Java实现)

    这是悦乐书的第283次更新,第300篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第151题(顺位题号是665).给定一个包含n个整数的数组,您的任务是通过修改最多1个元 ...

  6. 调用远程主机上的 RMI 服务时抛出 java.rmi.ConnectException: Connection refused to host: 127.0.0.1 异常原因及解决方案

    最近使用 jmx 遇到一个问题,client/server 同在一台机器上,jmx client能够成功连接 server,如果把 server 移植到另一台机器上192.168.134.128,抛出 ...

  7. socketServer并发处理socket

    socketserver简单介绍 ''' socketserver:是对socket的封装,实现并发处理 前两个TCP,UDP常用,后两个不常用 ''' import socketserver soc ...

  8. 在Windows下使用Git+TortoiseGit+码云管理项目代码

    1.      安装Git 下载地址:点击打开链接 安装指南:默认选项即可 2.      安装TortoiseGit 下载地址:点击打开链接 安装指南:点击打开链接 3.      在码云创建账号, ...

  9. web框架开发-模板层

    你可能已经注意到我们在例子视图中返回文本的方式有点特别. 也就是说,HTML被直接硬编码在 Python代码之中. def current_datetime(request): now = datet ...

  10. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...