vue v-if v-else v-show v-for

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>

</head>

<body>

    <div id='app'>

        <div v-if="count > 0">

            count大于0,count的值是{{count}}

        </div>

        <div v-else>

            count的值是:{{count}}

        </div>

        <div v-show="count == -1"> show:{{count}}</div>

        {{msg}}

        <div v-for="item in list" v-bind:style="{'color':'red'}">{{item}}</div>

    </div>

</body>

<script>

    var app = new Vue({

        el: "#app",

        data: {

            msg: 'hello vue!!',

            count: 0,

            list: [1, 2, 3, 4, 5]

        }

    })

</script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容