v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。

如果v-if表达式赋值为false,那么对应的元素就会从DOM中移除;

否则,对应元素的一个克隆将被重新插入DOM中,代码如下:

<template>
<div id="app">
<h1>Title</h1>
<p>paragraph 1</p>
<p>paragraph 2</p>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
greeting: true
}
})
</script>

 

v-show

v-show指令是根据表达式的值来显示或者隐藏HTML元素。当v-show赋值为false时,元素被隐藏。查看DOM时,会发现元素上多了一个内联样式style="display:none"

<template>
<div id="app">
<h1>Title</h1>
<p v-show="ok">我是对的</p>
<p v-show="no">我是错的</p>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
ok: true,
no: false
}
})
</script>

  

如图所示:

注:v-show不支持<template>语法
一般来说,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗。因此,如果需要频繁的切换,则使用v-show较好;如果在运行时条件不大可能改变,则使用v-if较好。

v-else

v-else就是JavaScript中的else的意思,它必须跟着v-if或者v-show使用。如下代码:

<template>
<div id="app">
<h1>Title</h1>
<p v-if="ok">我是对的</p>
<p v-if="ok">我是错的</p>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
ok: true
}
})
</script>

  将v-show用在组件上时,因为指令的优先级v-else会出现问题,所以不要这样做。我们可用用另一个v-show替换v-else。

v-model

v-model指令用来在input、select、text、checkbox、radio等表单控件元素上创建双向数据绑定的。根据控件类型v-model自动选取正确的方法更新元素。代码如下:

<div id="example">
<form>
姓名:
<input type="text" v-model="data.name" placeholder="姓名"/>
<br />
性别:
<input type="radio" id="one" value="One" v-model="data.sex"/>
<label for="man">男</label>
<input type="radio" id="two" value="Two" v-model="data.sex"/>
<label for="male">女</label>
<br />
<input type="checkbox" id="jack" value="book" v-model="data.interest"/>
<label for="jack">阅读</label>
<input type="checkbox" id="john" value="swim" v-model="data.interest"/>
<label for="john">游泳</label>
<input type="checkbox" id="move" value="game" v-model="data.interest"/>
<label for="move">游戏</label>
<input type="checkbox" id="mike" value="song" v-model="data.interest"/>
<label for="mike">唱歌</label>
<br />
身份:
<select v-model="data.identity">
<option value="teacher" selected>教师</option>
<option value="doctor">医生</option>
<option value="lawyer">律师</option>
</select>
</form>
</div>
<script type="text/javascript">
new Vue({
el: '#example',
data: {
data:{
name:'',
sex:'',
interest:[],
identity:''
}
}
})
</script>

  

v-for

使用$index来获得相应的数组索引。

<template>
<div id="app">
<h1>Title</h1>
<ul>
<li v-for="item in items" class="item-{{$index}}">
{{$index}} - {{parentMessess}} - {{item.msg}}
</li>
</ul>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
: '前端开发基础技术',
items:{
{msg: 'html'},
{msg: 'css'},
{msg: ‘javascript'}
}
}
})
</script>

 

v-text

v-text 指令可以更新元素的textContent.

以下代码效果一样:

<span v-text="msg"></span> <br/>
<span>{{msg}}</span>

v-html

v-html指令更新元素的innerHTML.

<template>
<div id="app">
<h1>Title</h1>
<p v-html="msg"></p>
<p>{{msg}}</p>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg:'<p>效果一样</p>'
}
})
</script>

  

v-bind

v-bind指令用于响应更新HTML特性,将一个或者多个attribute,或者一个组件prop动态绑定到表达式。

单向绑定,从M绑定到V.

v-bind可以简写为:

<!-- 完整语法 -->
<a v-bind:href="url"></a> <!-- 语法糖 -->
<a :href ="url"></a> <!-- 完整语法 -->
<button v-bind:display="block"></buttton>

 在绑定class或者style时,支持其他类型的值,如数组或对象。如:

<template>
<div id="app">
<h1>Title</h1>
<div :class="[classA,{classB:isB,classC:isC}]”></div>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
classA: 'A',
isB: false,
isC: true
}
})
</script>

  结果如图:

  

v-on

v-on指令用于绑定事件监听器。事件类型由参数指定。

如果访问原始DOM事件,可以使用$event传入方法。

<template>
<div id="app">
<h1>Title</h1>
<p> {{}} </p>
<button v-on:click="doThis">doThis</button>
</div>
</template> <script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
msg: 'hello world',
},
methods: {
doThis: function(){
this.msg = 'hello world change !!!'
}
}
})
</script>

  

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。

css代码:

<!-- css代码 -->

[v-cloak]{

}

<!-- html -->

<div v-cloak>
{{msg}}
</div>

  

vue.js 常用指令用法的更多相关文章

  1. 02: vue.js常用指令

    目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...

  2. Vue - vue.js 常用指令

    Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...

  3. vue.js常用指令

    本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...

  4. 【Vue】vue.js常用指令

    http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...

  5. 新人成长之入门Vue.js常用指令介绍(一)

    写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...

  6. Vue.js常用指令:v-on

    一.v-on指令 v-on指令在Vue.js中用来处理对应的事件.用法: v-on:事件类型="函数体" 例如:点击按钮的时候执行play事件 <button v-on:cl ...

  7. Vue.js常用指令:v-show和v-if

    一.v-show指令 v-show指令可以用来动态的控制DOM元素的显示或隐藏.v-show后面跟的是判断条件,语法如下: v-show="判断变量" 例如: v-show=&qu ...

  8. Vue.js常用指令:v-for

    一.什么是v-for指令 在Vue.js中,我们可以使用v-for指令基于源数据重复渲染元素.也就是说可以使用v-for指令实现遍历功能,包括遍历数组.对象.数组对象等. 二.遍历数组 代码示例如下: ...

  9. Vue.js常用指令:v-model

    一.v-model指令 v-model 用来获取表单元素的值.对应input输入框获取的是输入的值,单选按钮.复选框.下拉框获取的是选择的状态. 代码示例如下: <!DOCTYPE html&g ...

随机推荐

  1. Extjs 中combobox下拉框初始化赋值

    近日在工作中遇到一个需求,要求页面初始化的时候给dataGrid表插入一条数据. 前端使用的是Extjs框架,dataGrid表有四列,其中三列是类型为textbox,普通文本框,另外一列类型是com ...

  2. Sql server 中count() 与 sum() 的区别

    一句话概括就是Sum(列) 是求和,把所有列的值进行汇总求和:COUNT(列) 是行数汇总,只要列的值不为Null,就会增加1: 举个例子说明下: --创建临时表结构 CREATE TABLE Tem ...

  3. redis 持久化 ——RDB

    文章目录 RDB 关于 fork dump.rdb 文件 如何触发 RDB 快照 如何恢复 优势 劣势 停掉 RDB RDB redis database 的简写 : 在指定时间间隔后,将内存中的数据 ...

  4. 题解 luoguP3554 【[POI2013]LUK-Triumphal arch】

    代码的关键部分 inline void dfs(int u,int fa) { ; for(int i=first[u]; i; i=nxt[i]) { int v=go[i]; if(v==fa)c ...

  5. [NOIP普及组2011]装箱问题

    目录 链接 博客链接 题目链接 题目内容 题目描述 格式 输入 输出 样例 输入 输出 前缀知识 题解 题目名称:装箱问题 来源:2011年NOIP普及组 链接 博客链接 CSDN 洛谷博客 题目链接 ...

  6. Mobile Phone Network CodeForces - 1023F (最小生成树)

    大意: 无向图, 其中k条边是你的, 边权待定, m条边是你对手的, 边权已知. 求如何设置边权能使最小生成树中, 你的边全被选到, 且你的边的边权和最大. 若有多棵最小生成树优先取你的边. 先将$k ...

  7. java中针对 try和finally一些总结

    结论 1.不管有没有异常,finally中的代码都会执行 2.当try.catch中有return时,finally中的代码依然会继续执行 3.finally是在return后面的表达式运算之后执行的 ...

  8. (二十四)JSP标签之基本标签(<jsp:标签名>)

    一.常用标签 1.1 jsp中标签一共有8中,其中常用的有6中,本文将介绍这6种常用的标签. 1.2 6种标签 1. <jsp:include> <jsp:include>标签 ...

  9. (三)自定义Realm

    一.Realm概念 Realm:域,Shiro从从Realm获取安全数据(如用户.角色.权限),就是说SecurityManager要验证用户身份,那么它需要从Realm获取相应的用户进行比较以确定用 ...

  10. 原生js上传图片遇到的坑(axios封装)

    后台给我写了一个上传图片的接口,自己用form表单测试成功 接口可以正常跳转 测试的代码: <!doctype html> <html lang="en"> ...