Vue之条件渲染

最新推荐文章于 2023-11-19 14:38:37 发布

Quincy379

最新推荐文章于 2023-11-19 14:38:37 发布

阅读量248

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/qq_33733970/article/details/80632573

版权

vue.js 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    //diff算法注意key属性的使用
    <div v-if="show===1">{{ msg }} <input type="text" key="msg"></div>
    //中间不能有别的元素
    <div v-else-if="show===2">Quincy Cui <input type="text" key="QC"></div>
    <div v-else>Quincy Coder</div>
</div>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            show:1,
            msg:'hello world'
        }
    })
</script>
</body>
</html>