指令(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. web 开发之js---js 中的数组操作

    js数组元素的添加和删除一直比较迷惑,今天终于找到详细说明的资料了,先给个我测试的代码^-^var arr = new Array();arr[0] = "aaa";arr[1] ...

  2. ci url 控制 查询 通过路由 控制返回 视图的结果

    http://192.168.2.102/fastdatav/ChkUrl/daily/G8 http://192.168.2.102/fastdatav/ChkUrl/daily/ 放在 试图  控 ...

  3. 预载入和javascript对象

    请参见 http://www.west263.com/info/html/wangyezhizuo/Javascript/20080225/34168.html

  4. POJ 2629:Common permutation

    Common permutation Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5510   Accepted: 168 ...

  5. xcodebuild' requires Xcode, but active developer directory '/Library/Developer/CommandLineTools' is

    method: select Xcode version in Command Line Tools in Location(Click Xcode and then Preferences) Bef ...

  6. xUnit随笔

    XUnit入门 1.如果之前安装了xUnit.net Visual Studio Runner扩展包,通过"工具"菜单下的"扩展和更新"先将该扩展包卸载. 2. ...

  7. Create schema error (unknown database schema '')

    Andrey Devyatka 4 years ago Permalink Raw Message Hi,Please tell me, can I use the static library in ...

  8. linux centos7 安装mysql-5.7.17教程(图解)

    1系统约定安装文件下载目录:/data/softwareMysql目录安装位置:/usr/local/mysql数据库保存位置:/data/mysql日志保存位置:/data/log/mysql 2下 ...

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

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

  10. 栗染-Myeclispe连接SQL Server数据库

    第一步,在SQL server方面 这里是以身份验证登录. 这里我是建了一个hw的数据库,其他没啥说的. 第二步,最主要的一部分 因为第一次连接SQL Server数据库,所以就不知道还有这一步.不然 ...