指令(Directives) 是带有v- 前缀的特殊属性,指令属性是单一的js表达式.

指令的职责就是表达式的值发生变化时,在DOM中做出相应的回应.

如下例子:

实例

<div id="app">
     <p v-if="seen">现在你看到我了</p>
</div>
<script>
new Vue({ el: '#app', data: { seen: true } })
</script>

实例:根据时间切换2段文本内容

<div id="app">
<ul>
<li v-show="ok">
我是老大
</li>
<li v-show="!ok">我是老二</li>
</ul> </div> <script>
var vm = new Vue({
el: '#app',
data: {
ok: true
}
}) setInterval(function () {
vm.ok = !vm.ok;
},2000)
</script>

Vue指令的概念的更多相关文章

  1. 6、VUE指令

    1.指令的格式 1.1. 指令的概念 指令是指带有v-前缀的特殊属性,指令的职责是当其表达式的值改变时,相应的将某些行为应用到DOM上. 1.2. 指令必须是html的属性 指令只能以带前缀的html ...

  2. Vue指令总结---小白同学必看

    今天主要复习一下我们最熟悉vue指令,想要代码撸得快,就要多看书,多看看官方的文档和学习指令,学习编程是一个非常享受的过程,尤其是你不断地去解决问题,获得一项技能,实现薪水的上涨.进行Vue的指令烹饪 ...

  3. 一个能拖动,能调整大小,能更新bind值的vue指令-vuedragx

    一. 背景说明 开发一个可自定义组件化门户配置页面,期间采用了vue框架作为前端视图引擎,作为一个刚入手vue的萌新,开发第一个功能就遇到了拦路虎.需要一个拖动并且可改变大小的容器盒子.当时查看vue ...

  4. 【前端vue开发】Hbuilder配置Avalon、AngularJS、Vue指令提示

    偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下 ...

  5. Vue.js核心概念

    # 1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效 ...

  6. vue指令总结(二)

    一.vue指令 1.v-text v-text是用于操作纯文本,它会替代显示对应的数据对象上的值.当绑定的数据对象上的值发生改变,插值处的内容也会随之更新.注意:此处为单向绑定,数据对象上的值改变,插 ...

  7. vue指令与$nextTick 操作DOM的不同之处

    异步更新队列 可能你还没有注意到,Vue 异步执行 DOM 更新.只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变.如果同一个 watcher 被多次触发,只会被推 ...

  8. vue指令概览

    原文 简书原文:https://www.jianshu.com/p/5fd47b7422fd 大纲 1.什么是vue指令 2.向指令中传入参数 3.指令中带入修饰符 4.指令的缩写 5.常见的vue指 ...

  9. vue 指令中el 的 parentNode 为空的问题

    在项目中,突然发现在用vue指令的时候,发现元素el的父元素parentNode变成了null. 代码: if (el.parentNode && !Vue.prototype.$_h ...

随机推荐

  1. docker+zabbix,使用docker搭建zabbix服务

    Zabbix 介绍 zabbix(音同 zæbix)是一个基于WEB界面的提供分布式系统监视以及网络监视功能的企业级的开源解决方案. zabbix能监视各种网络参数,保证服务器系统的安全运营:并提供灵 ...

  2. 开源 免费 java CMS - FreeCMS2.1 会员3.9我的收藏

    项目地址:http://www.freeteam.cn/ 我的收藏 从左側管理菜单点击我的收藏进入.在这里能够查看当前登录会员的全部收藏记录. 查看收藏 点击标题能够查看收藏内容. 删除收藏 选择收藏 ...

  3. 【OI】Kruskal & ufs (克鲁斯卡与并查集)

    Kruskal是有关于最小生成树的算法. 这个算法非常好理解,用一句话来概括就是: 从小到大找不同集合的边. 那么,具体是怎样的呢. 1.先把所有顶点初始化为一个连通分量. 2.从所有边中选择最小的( ...

  4. JSP内建对象

    ① out - javax.servlet.jsp.jspWriter    out对象用于把结果输出到网页上. 方法: 1. void clear() ;    清除输出缓冲区的内容,可是不输出到c ...

  5. POJ 3100:Root of the Problem

    Root of the Problem Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 12060   Accepted: 6 ...

  6. Java 反射 —— 运行时的类型信息

    1. 反射机制的由来 RTTI 机制可以告知某个对象的确切类型,但有一个前提,该类型在编译时必须已知(编译器在编译时打开和检查 .class 文件以获取类型信息).似乎是个很宽松的限制,但假如你获取了 ...

  7. python-----列表生成式和列表生成器表达

    列表表达式: 程序一: 常规写法: L = [] for x in range(1, 11): L.append(x * x) print(L) #[1, 4, 9, 16, 25, 36, 49, ...

  8. PCB Genesis或Incam 右键导入TGZ 实现方法

    使用Genesis导入TGZ方式很多 的,比如有:写个脚本框选TGZ的的方式实现TGZ导入,将TGZ拖入脚本界面实现TGZ导入, 给Engineering Toolkit窗口句柄注册拖拽事件实现TGZ ...

  9. RabbitMQ一:消息队列的认识

    1异步处理 场景说明:用户注册后,需要发注册邮件和注册短信.传统的做法有两种1.串行的方式:2.并行方式. (1)串行方式:将注册信息写入数据库成功后,发送注册邮件,再发送注册短信.以上三个任务全部完 ...

  10. 设置Echarts鼠标悬浮样式

    在option下 tooltip内添加以下代码: (本文在后台进行传值 也就是其中的viewstate[]) tooltip: { show: true, trigger: 'axis', //sho ...