Vue 条件渲染

最新推荐文章于 2024-04-04 10:30:14 发布

TineAine

最新推荐文章于 2024-04-04 10:30:14 发布

阅读量94

点赞数

分类专栏： Vue 框架文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/tineaine/article/details/121602323

版权

框架同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title> Vue学习第二天 </title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
    </style>
</head>

<body>
    <div id="root">
        <!-- 简单匹配结构 -->
        计数器：{{index}}
        <button @click="index++">计数器自增</button>
        <!-- v-show隐藏的节点仍然可以拿到，但v-if会直接从DOM上删掉元素，所以无法获取到 -->
        <span v-show="index===0">v-show生效，当前值为0</span></span>
        <!-- v-if可以和v-else-if及v-else连用，但中间不能被任何元素打断 -->
        <span v-if="index === 1">显示1啦</span>
        <span v-else-if="index === 2">显示2啦</span>
        <span v-else-if="index === 3">显示3啦</span>
        <span v-else-if="index === 4">显示4啦</span>
        <span v-else-if="index === 5">显示5啦</span>
        <span v-else>都不匹配哦</span>
    </div>

    <script type="text/javascript">
        const vm = new Vue({
            el: '#root',
            data() {
                return {
                    index: 0

                }
            },
            // 所有的方法都要放在这里，标识被vue管理
            methods: {},
            computed: {}
        });
    </script>
</body>

</html>

TineAine

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 条件渲染

<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <title> Vue学习第二天 </title> <script type="text/javascript" src="../js/vue.js"></script>  <link rel="stylesheet"
复制链接

扫一扫

专栏目录