写一个vue应用领域模型的场景示例代码
时间: 2024-10-11 18:06:19 浏览: 5
在Vue.js中,领域模型(Domain Model)通常用于封装业务逻辑和数据管理,它不直接关注UI层面的具体渲染。下面是一个简单的Vue组件例子,展示了如何创建一个领域模型并将其集成到视图中:
```html
<!-- main.vue -->
<template>
<div id="app">
<input v-model="product.name" placeholder="Product Name">
<input v-model="product.price" placeholder="Price">
<button @click="addProduct">Add Product</button>
<ul>
<li v-for="(product, index) in products" :key="index">
{{ product.name }} - {{ product.price }}
<button @click="deleteProduct(index)">Delete</button>
</li>
</ul>
</div>
</template>
<script>
import { reactive } from 'vue';
export default {
data() {
return {
products: reactive([])
};
},
methods: {
addProduct() {
const newProduct = { name: this.product.name, price: Number(this.product.price) }; // Assuming price is a number
if (newProduct.name && newProduct.price) {
this.products.push(newProduct);
this.product = { name: '', price: '' };
}
},
deleteProduct(index) {
this.products.splice(index, 1);
}
},
};
</script>
```
在这个例子中,`Product`就是一个简化的领域模型,我们使用了Vue的响应式系统`reactive`来创建一个数据属性`products`来存储产品列表。添加和删除产品的方法分别对应业务逻辑。