vue.js实现条件渲染的实例代码

2020-06-13 10:44:19易采站长站整理

});

渲染结果:


<div id="app">text</div>

这里其实也就是利用了 template 节点不会被渲染在页面上的特性。

(3)属性的“条件渲染”

既然 HTML 节点可以条件渲染,多个 HTML 节点可以条件渲染,HTML 节点内字符串可以条件渲染,那么 HTML 属性呢?在编写模板的时候,HTML 属性其实也是字符串,我们能想上面那样,利用 template 模板创建字符串作为 HTML 的属性吗?


<div title=”<template v-if=’c3′>title content</template>”>此处应有 title</div>

是不是一看就感觉怪怪的?vue 也这样觉得,于是控制台里就解析成了:


<div title=”<template v-if=’c3′>title content</template>”>此处应有 title</div>

中间的 <template v-if=’c3′>title content</template> 整个的被识别成了字符串,那如果去掉外面的双引号呢?


<div title=<template v-if=’c3′>title content</template>>此处应有 title</div>

好像看起来更奇怪了。最后的渲染结果:


<div title="<template">title content>此处应有 title</div>

vue 的模板解析不是简单的依赖于字符串的解析,所以其实这里不能使用这种方法。正确的姿势是利用 v-bind 指令:


<div v-bind:title="c3 ? 'title content' : '' ">title</div>

因为 v-bind 指令的预期值实际上可以接受 js 表达式的,这里我们传入了一个条件表达式。当 c3 为真值的时候,渲染为 title=”title content”,当 c3 为假值的时候,渲染为 title=””。