使用Vue 3的列表渲染指令,创建一个应用,显示一个商品列表,每个商品是一个对象,包含name和price属性。
时间: 2024-10-09 16:02:15 浏览: 8
在Vue 3中,你可以使用`v-for`指令来遍历一个数组并动态地渲染列表。假设我们有一个商品数据数组,你可以这样做:
```html
<template>
<div id="product-list">
<ul>
<li v-for="(item, index) in products" :key="index">
{{ item.name }} - 价格:{{ item.price }}
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
products: [
{ name: '商品1', price: 9.99 },
{ name: '商品2', price: 19.99 },
{ name: '商品3', price: 29.99 },
],
};
},
};
</script>
```
在这个例子中,`v-for`指令用于迭代`products`数组中的每个元素。`:key`属性用于给每个列表项唯一标识,避免浏览器重新排序导致的问题。`{{ ... }}`语法用于插值表达式,将商品的名称和价格显示出来。
相关问题
请使用vue3创建一个可拖拽列表组件
以下是使用Vue3创建可拖拽列表组件的示例代码:
```
<template>
<div class="drag-list">
<div
class="drag-item"
v-for="(item, index) in items"
:key="item.id"
:draggable="true"
@dragstart="dragStart(index)"
@dragover="dragOver(index)"
@drop="drop(index)"
@dragend="dragEnd"
>
{{ item.name }}
</div>
</div>
</template>
<script>
import { reactive, toRefs } from 'vue';
export default {
name: 'DragList',
setup() {
const state = reactive({
items: [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
{ id: 4, name: 'Item 4' },
],
draggedItemIndex: null,
});
const dragStart = (index) => {
state.draggedItemIndex = index;
};
const dragOver = (index) => {
const draggedItem = state.items[state.draggedItemIndex];
const targetItem = state.items[index];
if (draggedItem.id !== targetItem.id) {
const items = [...state.items];
items.splice(state.draggedItemIndex, 1);
items.splice(index, 0, draggedItem);
state.items = items;
state.draggedItemIndex = index;
}
};
const drop = () => {
// do nothing
};
const dragEnd = () => {
state.draggedItemIndex = null;
};
return {
...toRefs(state),
dragStart,
dragOver,
drop,
dragEnd,
};
},
};
</script>
<style scoped>
.drag-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.drag-item {
background-color: #f0f0f0;
padding: 10px;
cursor: move;
}
</style>
```
该组件使用响应式对象`state`来存储列表项和拖拽过程中的状态。列表项可以通过`v-for`指令动态渲染,每个列表项都设置为可拖拽,并绑定了相关的拖拽事件。在拖拽开始时,记录被拖拽的列表项的索引。在拖拽过程中,根据当前鼠标指针所在的位置动态改变列表项的顺序。在拖拽结束时,清空被拖拽的列表项的索引。最后,将`state`对象中的属性通过`toRefs`函数转换为响应式引用,以便在模板中使用。
vue3写一个列表组件
以下是一个简单的 Vue3 列表组件示例:
```vue
<template>
<div>
<ul>
<li v-for="(item, index) in items" :key="index">{{ item }}</li>
</ul>
</div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyList',
props: {
items: {
type: Array,
required: true,
},
},
});
</script>
```
在上面的代码中,我们定义了一个名为 `MyList` 的组件,并且接收了一个 `items` 属性作为数据源。在模板中,我们通过 `v-for` 指令遍历 `items` 数组,渲染出列表项。注意到我们使用了 `:key` 绑定了 `index`,这是为了帮助 Vue 识别每个列表项的唯一性,提高性能。
使用该组件时,可以像下面这样传递数据:
```vue
<template>
<div>
<my-list :items="['item 1', 'item 2', 'item 3']" />
</div>
</template>
<script>
import { defineComponent } from 'vue';
import MyList from './MyList.vue';
export default defineComponent({
components: {
MyList,
},
});
</script>
```
阅读全文