Vue.js — 条件渲染

Z时代
2024-01-10
分类：综合

vue

1.条件渲染

1.1 v-if、v-else-if、v-else

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
		<style>
			.base {
				color: 'blue';
				font-size: 30px;
			}
			.override {
				color: ''
			}
		</style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<p v-if="seen">Vue is awesome!</p>
			<p v-else>Oh no ????</p>
			<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>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					seen: true,
					ok: false,
					type: ''
                }
            });
        </script>
    </body>
</html>

1.2 key

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
		<style>
		</style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<template v-if="loginType=='username'">
				<label>用户名：</label>
				<input placeholder="输入用户名" key="username" />
			</template>
			<template v-else>
				<label>邮箱：</label>
				<input placeholder="输入邮箱地址" key="email" />
			</template>
			<button @click="toggleLogin">切换登录方式</button>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					loginType: 'username'
                },
				methods: {
					toggleLogin: function(){
						this.loginType = this.loginType ? '' : 'username'
					}
				}
            });
        </script>
    </body>
</html>

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。

在点击"切换登录方式"按钮时，<label>元素会被复用，<input>元素由于添加了key属性而不会被复用。

1.3 v-show

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">      
		<style>
		</style>
        <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div >
			<p v-show="ok">Hello!</p>
        </div>
        <script>
            var vm = new Vue({
                el: '#app',
                data: {
					ok: true
                }
            });
        </script>
    </body>
</html>