<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 11</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
const app = Vue.createApp({
data() {
return {
listArray: ['dell','lee','tea'],
listObject: {
firstName: 'dell',
lastName: 'lee'
}
}
},
methods: {
handleClick() {
this.listArray.pop();
}
},
template: `
<div>
<div v-for='(item, index) in listArray' :key='index'>
{{item}}--{{index}}
</div>
<div v-for='(value, key, index) in listObject' :key='index'>
{{value}}--{{key}}--{{index}}
</div>
<button @click='handleClick'>变更</button>
</div>
`
});
const vm = app.mount('#root');
</script>
</html>
列表循环渲染
最新推荐文章于 2023-02-10 15:50:48 发布