});
渲染结果:
<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=””。










