- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- 条件渲染
- </title>
- </head>
- <body>
- <div id="if">
- <h1 v-if="ok">
- h1
- </h1>
- <h1 v-else>
- h2
- </h1>
- <template v-if="ok">
- <h1>
- Title
- </h1>
- <p>
- Paragraph 1
- </p>
- <p>
- Paragraph 2
- </p>
- </template>
- <div v-if="type === 'A'">
- A
- </div>
- <div v-else-if="type === 'B'">
- B
- </div>
- <div v-else-if="type === 'C'">
- C
- </div>
- <div v-else>
- Not A/B/C
- </div>
- <!--v-else 元素必须紧跟在 v-if 元素或者 v-else-if的后面——否则它不能被识别-->
- <br>
- <template v-if="loginType === 'username'">
- <label>
- Username
- </label>
- <input placeholder="Enter your username">
- </template>
- <template v-else>
- <label>
- </label>
- <input placeholder="Enter your email address">
- </template>
- <!--v-else-if 必须跟在 v-if 或者 v-else-if之后-->
- <!--vue 尝试尽可能高效的渲染元素,通常会复用已有元素而不是从头开始渲染。<input> 会被复用,仅仅是替换了他们的 placeholder。-->
- <!--这样也不总是符合实际需求,所以 Vue 提供一种方式让你可以自己决定是否要复用元素。你要做的是添加一个属性 key ,key 必须带有唯一的值。-->
- <template v-if="loginType === 'username'">
- <label>
- Username
- </label>
- <input placeholder="Enter your username" key="username-input">
- </template>
- <template v-else>
- <label>
- </label>
- <input placeholder="Enter your email address" key="email-input">
- </template>
- <!--注意, <label> 元素仍然会被复用,因为没有被添加了 key 属性。-->
- <h1 v-show="ok">
- Hello h1!
- </h1>
- <!--注意: v-show 不支持 <template> 语法-->
- </div>
- <script src="js/vue.js">
- </script>
- <script>
- var vm = new Vue({
- el: "#if",
- data: {
- ok: true,
- type: 'D',
- loginType: 'username2'
- }
- })
- </script>
- </body>
- </html>
来源: http://www.bubuko.com/infodetail-1956004.html