v-if

v-if指令可以完全根据表达式的值在DOM中生成或移除一个元素。如果v-if表达式赋值为false，那么对应的元素就会从DOM中移除；否则，对应元素的一个克隆将被重新插入DOM中，代码如下：

<div id="example-2">
 <p v-if="greeting">Hello!</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

由于v-if是一个指令，需要将它添加到一个元素上。但是如果想要切换多个元素，则可以把<template>元素当做包装元素，并在其上使用v-if，最终的渲染结果不会包含它。代码如下：

<div id="example-2">
 <template v-if="greeting">
 <h1>Title</h1>
 <p>Paragraph 1</p>
 <p>Paragraph 1</p>
 </template>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example-2',
 data: {
 greeting: true
 }
 })
</script>

v-show

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

如图所示：

注：v-show不支持<template>语法。

一般来说，v-if有更高的切换消耗，而v-show有更高的初始渲染消耗。因此，如果需要频繁的切换，则使用v-show较好；如果在运行时条件不大可能改变，则使用v-if较好。

v-else

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

<div id="example">
 <P v-if="ok">我是对的</P>
 <p v-else="ok">我是错的</p>
</div>
<script type="text/javascript">
 var exampleVM2 = new Vue({
 el: '#example',
 data: {
 ok: false
 }
 })
</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-model指令后面还可以添加多个参数（number、lazy、debounce）。

1.number

如果想要用户的输入自动转换为Number类型（如果原值的转换结果为NAN，则返回原值），则可以添加一个number特性。

2.lazy

在默认情况下，v-model在input事件中同步输入框的值与数据，我们可以添加一个lazy特性，从而将数据改到在change事件中发生。代码如下：

<div id="example">
 <input v-model="msg" lazy style="width:500px;"/><br/>
 {{msg}}
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 msg:'内容是在change事件后才改变的~'
 },
 watch:{
 
 }
 })
</script>

3.debounce

设置一个最小的延时，在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作（例如，在input中输入内容时要随时发送ajax请求），那么它较为有用。

<input v-model="msg" debounce="5000"/>

v-repeat

v-repeat（已经废除）指令基于源数据重复渲染元素。可以使用$index来呈现相对应的数组索引。不细讲。

数组变动检测

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push(), pop(), shift(), unshift(), splice(), sort(), reverse()

example1.items.push({ message: 'Baz' });
example1.items = example1.items.filter(function (item) {
 return item.message.match(/Foo/);
});

vue.js还增加了两个方法来观测变化：$set、$remove。

我们应该尽量避免直接设置数据绑定的数组元素，因为这些变化不会被vue.js检测到，因而也不会更新视图渲染。可以使用$set方法：

demo.items.$set(0,{childMsg:'Changed!'})

$remove是$splice的语法糖，用于从目标数组中查找并删除元素：

demo.items.$remove(0);

注：ECMAScript5无法检测到新属性添加到一个对象上或者在对象上删除。要处理这种情况，Vue.js增加了三种方法：$add(key,value)、$set(key,value)、$delete(key,value)，这些方法可以用来添加和删除属性，同时触发视图更新。

内置过滤器

1.filterBy(0.12版本)

 实现如图所示：

<div id="example">
 <input v-model="searchText"/>
 <ul>
 <li v-for="user in users | filterBy searchText in 'name' ">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 users:[
 {
 name:'快车',
 tag:'1'
 },
 {
 name:'出租车',
 tag:'2'
 },
 {
 name:'顺风车',
 tag:'3'
 },
 {
 name:'专车',
 tag:'4'
 }
 ]
 }
 })
</script>

在输入框中输入'专车'，得到如图所示的结果：

2.orderBy(0.12版本)

实现降序排列，例：

<div id="example">
 <ul>
 <li v-for="user in users | orderBy field reverse">{{user.name}}</li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 field:'tag',
 reverse:-1,
 users:[
 {
 name:'出租车',
 tag:'2'
 },
 {
 name:'快车',
 tag:'1'
 },
 {
 name:'顺风车',
 tag:'3'
 },
 {
 name:'专车',
 tag:'4'
 }
 ]
 }
 })
</script>

v-for

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

<div id="example">
 <ul>
 <li v-for="item of items" class="item-{{$index}}">
 {{$index}} - {{parentMessage}} - {{item.msg}}
 </li>
 </ul>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 parentMessage:'滴滴',
 items:[
 {msg:'顺风车'},
 {msg:'专车'}
 ]
 }
 })
</script>

注：vuejs1.0.17及以后低版本支持of分隔符，更接近JavaScript遍历器语法。

有时我们可能想重复一个包含多个DOM元素的块，可以使用<template>,如：

<ul>
 <template v-for="item in items">
 <li>{{ item.msg }}</li>
 <li class="divider"></li>
 </template>
</ul>

v-for也支持整数

代码如下：

<div>
 <span v-for="n in 10">{{ n }} </span>
</div>

或者

<div>
 <span v-for="n in 10">{{ $index }} </span>
</div>

v-text

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

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

得到的结果一样。

v-html

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

<div id="example">
 <p v-html="html"></p>
 <p>{{{html}}}</p>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 html:'<p>效果一样</p>'
 }
 })
</script>

注：不建议在网站上直接动态渲染任意HTML片段，很容易导致XSS攻击。

v-bind

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

<!-- 完整语法 -->
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 缩写 -->
<a :href="url" rel="external nofollow" rel="external nofollow" ></a>
<!-- 完整语法 -->
<button v-bind:disabled="someDynamicCondition">Button</button>
<!-- 缩写 -->
<button :disabled="someDynamicCondition">Button</button>

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

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

结果如图：

如果没有参数时，可以绑定到一个对象。注意，此时class和style绑定不支持数组和对象（对象key会转换为小写）。代码如下：

<div id="example">
 <div v-bind="{id:someProp,'OTHERATTR':otherProp}"></div>
</div>
<script type="text/javascript">
 new Vue({
 el: '#example',
 data: {
 someProp:'idName',
 otherProp:'prop'
 }
 })
</script>

结果如图：

在绑定prop时，prop必须在子组件中声明。可以用修饰符指定不同的绑定类型。修饰符为：

.sync——双向绑定，只能用于prop绑定。

.once——单次绑定，只能用于prop绑定。

.camel——将绑定的特性名字转换回驼峰命名。只能用于普通HTML特性的绑定，通常用于绑定用驼峰命名的SVG特性，比如viewBox。

v-on

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

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

<button v-on:click="doThis('hello',$event)"></button>
<!--缩写-->
<button @click="doThis('hello',$event)"></button>

完整例子：

<div id="example">
 <button v-on:click="greet">Greet</button>
</div>
var vm = new Vue({
 el: '#example',
 data: {
 name: 'Vue.js'
 },
 // 在 methods 对象中定义方法
 methods: {
 greet: function (event) {
 // 方法内 this 指向 vm
 alert('Hello ' + this.name + '!')
 // event 是原生 DOM 事件
 alert(event.target.tagName)
 }
 }
})
// 也可以在 JavaScript 代码中调用方法
vm.greet(); // -> 'Hello Vue.js!'

###事件修饰符

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat">
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

### 按键修饰符

<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<input v-on:keyup.13="submit">
<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

全部的按键别名：enter，tab，delete，esc，space，up，down，left，right

v-ref

在父组件上注册一个子组件的索引，便于直接访问。不需要表达式，必须提供参数id。可以通过父组件的$refs对象访问子组件。

v-el

为DOM元素注册一个索引，方便通过所属实例的$els访问这个元素。可以用v-el:some-el设置this.$els.someEl。

<span v-el:msg>hello</span>
<span v-el:other-msg>world</span>

通过this.$els获取相应的DOM元素：

this.$els.msg.textContent //'hello'
this.$els.otherMsg.textContent //'world'

在新的vuejs中，简单起见， v-el 和 v-ref 合并为一个 ref 属性了，可以在组件实例中通过 $refs 来调用。

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>

v-cloak

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

css代码：

[v-cloak] {
 display: none;
}

html：

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

# vuejs  # 指令  # Vuejs第十篇之vuejs父子组件通信  # Vuejs第九篇之组件作用域及props数据传递实例详解  # vueJS简单的点击显示与隐藏的效果【实现代码】  # Vuejs第七篇之Vuejs过渡动画案例全面解析  # VueJS全面解析  # VUEJS实战之构建基础并渲染出列表（1）  # VUEJS实战之修复错误并且美化时间（2）  # 基于Vuejs实现购物车功能  # Vuejs第八篇之Vuejs组件的定义实例解析  # vuejs在解析时出现闪烁的原因及防止闪烁的方法  # 绑定  # 多个  # 可以使用  # 修饰符  # 我是  # 可以用  # 如图所示  # 较好  # 更高  # 不支持  # 如图  # 则可  # 转换为  # 跳过  # 值为  # 移除  # 可以用来  # 输入框  # 增加了  # 是一个 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： Laravel怎么返回JSON格式数据_Laravel API资源Response响应格式化【技巧】  如何实现建站之星域名转发设置？  Laravel怎么创建控制器Controller_Laravel路由绑定与控制器逻辑编写【指南】  JavaScript实现Fly Bird小游戏  齐河建站公司：营销型网站建设与SEO优化双核驱动策略  网站建设保证美观性，需要考虑的几点问题！  如何在阿里云服务器自主搭建网站？  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界？  详解jQuery中的事件  JavaScript中的标签模板是什么_它如何扩展字符串功能  如何在HTML表单中获取用户输入并用JavaScript动态控制复利计算循环  如何在企业微信快速生成手机电脑官网？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  香港服务器网站搭建教程-电商部署、配置优化与安全稳定指南  黑客入侵网站服务器的常见手法有哪些？  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  Laravel如何使用Seeder填充数据_Laravel模型工厂Factory批量生成测试数据【方法】  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符（忽略数字与嵌套）  Laravel如何自定义分页视图？（Pagination示例）  浅谈Javascript中的Label语句  php结合redis实现高并发下的抢购、秒杀功能的实例  Laravel如何使用API Resources格式化JSON响应_Laravel数据资源封装与格式化输出  如何破解联通资金短缺导致的基站建设难题？  打造顶配客厅影院，这份100寸电视推荐名单请查收  零服务器AI建站解决方案：快速部署与云端平台低成本实践  HTML5空格在Angular项目里怎么处理_Angular中空格的渲染问题【详解】  免费网站制作appp,免费制作app哪个平台好？  湖南网站制作公司,湖南上善若水科技有限公司做什么的？  微信小程序 input输入框控件详解及实例（多种示例）  深圳网站制作培训,深圳哪些招聘网站比较好？  微信小程序 配置文件详细介绍  青岛网站建设如何选择本地服务器？  php读取心率传感器数据怎么弄_php获取max30100的心率值【指南】  ,怎么在广州志愿者网站注册？  如何做网站制作流程,*游戏网站怎么搭建？  小视频制作网站有哪些,有什么看国内小视频的网站，求推荐？  php8.4header发送头信息失败怎么办_php8.4header函数问题解决【解答】  JS弹性运动实现方法分析  国美网站制作流程,国美电器蒸汽鍋怎么用官方网站？  如何在万网自助建站平台快速创建网站？  教学论文网站制作软件有哪些,写论文用什么软件 ？  Chrome浏览器标签页分组怎么用_谷歌浏览器整理标签页技巧【效率】  Laravel怎么使用artisan命令缓存配置和视图  百度浏览器如何管理插件 百度浏览器插件管理方法  原生JS实现图片轮播切换效果  如何在万网主机上快速搭建网站？  如何在自有机房高效搭建专业网站？  如何生成腾讯云建站专用兑换码？  Laravel怎么生成URL_Laravel路由命名与URL生成函数详解  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？