在 Vue 3 中,条件渲染通常使用 v-if、v-else 和 v-show 指令来实现。
以下是一些常见的条件渲染示例:
1.使用 v-if 与 v-else
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>
<a href="#" v-if="user.name=='james'">注册</a>
<a href="#" v-else>取消</a>
</p>
</div>
</body>
<script>
const {createApp} = Vue
createApp({
data(){
return{
user:{
// name:'james',
name:'smith'
}
}
},
}).mount("#app")
</script>
</html>
2.使用 v-show
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<p>
<a href="#" v-show="user.name=='james'">注册</a>
<a href="#" v-show="user.name!=='james'">取消</a>
</p>
</div>
</body>
<script>
const {createApp} = Vue
createApp({
data(){
return{
user:{
name:'james',
// name:'smith'
}
}
},
}).mount("#app")
</script>
</html>
在这两个示例中,v-if 和 v-show 被用来根据特定条件选软元素。
选择使用哪一个取决于你的具体需求:
如果你需要频繁切换元素的显示状态, v-show 可能是更好的选择,因为它只是切换CSS属性。
如果你只需要根据条件渲染元素一次, v-if 可能更适合,因为它可以在条件为假时不渲染元素,从而节省资源。