<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div>
<span v-for="item in list"><span>{{ item.id }}</span>-<span>{{ item.name }}</span></span>
<div @click="change">变换孩子节点位置</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.8/vue.min.js"></script>
<script>
var vm = new Vue({
el: '#app',
data() {
return {
list: [
{ id: 1, name: '名称1' },
{ id: 2, name: '名称2' },
{ id: 3, name: '名称3' },
{ id: 4, name: '名称4' },
{ id: 5, name: '名称5' },
]
}
},
methods: {
change(){
this.list.reverse();
}
}
})
</script>
</body>
</html>
span{
display: inline-block;
margin: 10px;
border: 1px solid yellowgreen;
background-color: brown;
color: white;
font-size: 16px;
font-weight: bold;
padding: 15px;
}
External CSS
This Pen doesn't use any external CSS resources.