Vue基础之内部指令（上）

LeoHsiun 发布于2019-08-26 13:30 / 3031人阅读

摘要：以及条件指令类似于里的，这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素，可以将他们包裹在之内，使用条件指令操作外层的，并不会包含在最终的渲染结果中。要是不希望被复用，需要在指定的元素上添加值，值存在且唯一。

v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else

类似于JavaScript里的if、else-if、else，这三个指令根据表达式的值对DOM/组件进行渲染/销毁。

值得注意的是，v-else-if必须跟在v-if之后，v-else必须跟在v-else-if或者v-if之后。
如果想一次性判断多个元素，可以将他们包裹在template之内，使用条件指令操作外层的template，template并不会包含在最终的渲染结果中。

Vue在渲染元素时，出于效率考虑，会尽可能的复用已有元素而非重新渲染。

点击“toggle”按钮，输入框内的placeholder改变，但当输入内容再进行切换后，内容依旧存在，说明被复用了，只是修改了placeholder。

要是不希望被复用，需要在指定的元素上添加key值，key值存在且唯一。

v-show

面试考点：v-show和v-if实现的视觉效果完全一致，但是还是有本质区别的，v-show改变CSS display的值，v-if彻底移除元素。
开发技巧：因为v-show是改变CSS属性，无论表达式真假与否，都会被编译。v-if直接操作DOM的移除/渲染，所以v-if更适合不经常变化的场景，v-show适合频繁变化的场景。

列表循环指令v-for

表达式需结合in使用，类似v-for="item in items"

数组


  
    {{index}}-{{item}}

用v-for将items中的数据循环渲染，item相当于items元素的别名，同时还支持index作为可选索引

对象

遍历对象属性时，有两个可选参数，分别为键名和索引


  
    {{index}}-{{key}}:{{value}}

整数

{{ n }}

输出：12345

v-text和v-html v-text

面试考点：v-text和{{}}功能一样，展示文本，但是v-text比{{}}好的地方是，当网速很慢或者javascript出错时，会暴露我们的{{xxx}}，而v-text不会显示出来。

v-html

面试考点：v-html和v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。


message: "Hello world",

Hello world
以上是本期全部内容，欲知后事如何，请听下回分解<(￣︶￣)↗[GO!]

云服务器 GPU云服务器之基础篇 vue基础教程 linux基础指令黑客基础之DOS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108945.html

Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

maybe_009 2019-08-30 15:55 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

2bdenny 2019-08-02 14:11 评论0 收藏0
Vue基础之内部指令（下）

摘要：绑定事件监听器直接撸代码计数器是实例的挂在对象等同于，是的语法糖，在内定义好方法，指令监听事件来触发一些代码。 v-on绑定事件监听器直接撸代码：计数器 number：{{number}} + - var app = new Vue({ el: #app, // app是Vue实例的挂在对象 data: { ...

LMou 2019-08-26 13:31 评论0 收藏0
Vue基础之内部指令（上）

摘要：以及条件指令类似于里的，这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素，可以将他们包裹在之内，使用条件指令操作外层的，并不会包含在最终的渲染结果中。要是不希望被复用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...

BoYang 2019-08-30 15:55 评论0 收藏0
Vue基础之内部指令（上）

摘要：以及条件指令类似于里的，这三个指令根据表达式的值对组件进行渲染销毁。如果想一次性判断多个元素，可以将他们包裹在之内，使用条件指令操作外层的，并不会包含在最终的渲染结果中。要是不希望被复用，需要在指定的元素上添加值，值存在且唯一。 v-if、v-else-if、v-else以及v-show 条件指令v-if、v-else-if、v-else 类似于JavaScript里的if、else-...

Keagan 2019-08-02 14:11 评论0 收藏0