vue div 动态排序

最新推荐文章于 2024-03-05 10:46:27 发布

在踩坑中前进

最新推荐文章于 2024-03-05 10:46:27 发布

阅读量2k

点赞数 4

本文链接：https://blog.csdn.net/zhaoyahui_666/article/details/110535334

版权

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <template>
        <div v-for="item in list">
            <div style="border: 1px solid burlywood;height:100px;width:300px;margin-top: 10px;" v-if="item === 1">a</div>
            <div style="border: 1px solid brown;height:100px;width:300px;margin-top: 10px;" v-if="item === 2">b</div>
            <div style="border: 1px solid red;height:100px;width:300px;margin-top: 10px;" v-if="item === 3">c</div>
            <div style="border: 1px solid rosybrown;height:100px;width:300px;margin-top: 10px;" v-if="item === 4">d</div>
        </div>
    </template>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
               list:[
                   3,1,4,2
               ]
            }
        }
    })
</script>
</html>