spring el表达式 if else_vue指令集合：v-for,v-show,v-if等

这一篇按照计划讲v-for,但是如果仅仅拿一篇来讲的话，有点少了，所以这一篇就拿来介绍一下vue指令吧。

什么是指令

解释：指令 (Directives) 是带有 v- 前缀的特殊属性

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

文本

v-text

解释：更新DOM对象的 textContent（文本内容）

为了我更新方便，以后HTML和JavaScript都写在一个代码块里。

<body><div id="app"><div v-text="msg"></div></div><script>var app = new Vue({el: "#app",data: {msg: "这里v-text内容"},})</script></body>

v-text和插值表达式的区别

一、如果不做任何处理的话，那么v-text与插值表达式相比较，没有闪现问题。

二、v-text会覆盖元素中元素中原本的内容。插值表达式只会替换该元素，不会覆盖其它内容。

共同点

把里面元素渲染出来，并不会编译标签

更新到这里，其实有一个问题，就是如果当网速慢的时候，会有一个闪现的问题，针对闪现的问题，我们可以用v-clock

v-cloak

作用：处理插值表达式闪现的问题

处理方法：

在该标签中添加v-cloak。

<body><style>[v-cloak] {display: none;}</style><div id="app"><div v-cloak>{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {msg: "这里v-text内容"},})</script>
</body>

如果后期项目由路由、webpack来挂载的话，那么就不需要v-cloak来解决闪动这个问题了。

v-html

解释：更新DOM对象的 innerHTML

<body><div id="app"><div v-html="msg"></div></div><script>var app = new Vue({el: "#app",data: {msg: "<h1>这里是v-html内容</h1>"},})</script>
</body>

v-bind

作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM

语法：v-bind:title="msg"

简写：:title="msg"

缩写符为“：”

用法介绍参考网址：

soviya：VUE操作classstyle绑定属性绑定事件事件修饰符zhuanlan.zhihu.com

v-on

作用：绑定事件

语法：v-on:click="say" or v-on:click="say('参数', $event)"

简写：@click="say"

说明：绑定的事件从methods中获取

缩写符为“@”

soviya：VUE操作classstyle绑定属性绑定事件事件修饰符zhuanlan.zhihu.com

v-for

作用：基于源数据多次渲染元素或模板块

v-for="（site，key ，index)in sites"

sites为在data里面对象名。

key为sites里面的健值名

index为sites里面的序列号（从0开始）。

v-for数组用法

<body><div id="app"><div v-for="(site,index) in siteObject">{{index}}--{{site}}</div></div><script>var app = new Vue({el: "#app",data: {siteObject: ["第一个","第二个","第三个",]},})</script>
</body>

出一个问题，我们如何让它倒序显示呢？

<body><div id="app"><div v-for="(site,index) in siteObject">{{index}}--{{site}}</div></div><script>var app = new Vue({el: "#app",data: {siteObject: ["第一个","第二个","第三个",]},created: function() {this.add();this.reverse();},methods: {add: function() {this.siteObject.push("第四个");},reverse: function() {this.siteObject.reverse();}}})</script>
</body>

这里还简单示例了一下向数组添加一个元素。

v-for对象用法

<body><div id="app"><div v-for="(site,key,index) in siteObject">{{index}}--{{key}}--{{site}}</div></div><script>var app = new Vue({el: "#app",data: {siteObject: {age: "23",name: "王五"}}})</script>
</body>

v-if 和 v-show

这两个都用于条件渲染

v-if：根据表达式的值的真假条件，销毁或重建元素

<body><div id="app"><div v-if="isShow">{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {isShow: false,msg: "这里是v-if内容"}})</script>
</body>

v-show：根据表达式之真假值，切换元素的 display CSS 属性

<body><div id="app"><div v-show="isShow">{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {isShow: false,msg: "这里是v-show内容"}})</script>
</body>

我们在审查元素的时候，就可以看到msg内容有加载，只不过dispaly为none了。

这两个区别在于v-if只有在条件为真的情况下会去加载里面内容，v-show是不管任何值都会去加载里面内容，然后再根据里面值真假去操作display是否显示。在进行频繁操作的时候建议使用v-show

提升性能：v-pre

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

2、简单来说，如果使用该标签，那么里面这个标签里面所元素都不会被编译出来。

使用方法

<body><div id="app"><div v-pre>{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {msg: "这里是一段内容"}})</script>
</body>

我们看到页面还是{{msg}}，并没有编译出来。

提升性能：v-once

1、说明：只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

2、简单来说，如果使用该标签，那么只渲染当前使用者一次。之后都不会再被渲染。

使用方法

<body><div id="app"><div v-once>{{msg}}</div></div><script>var app = new Vue({el: "#app",data: {msg:"这里是v-once内容"}})</script>
</body>