用vue + iview 写一个详情页面
时间: 2023-05-13 14:04:44 浏览: 94
好的,以下是一个简单的用 Vue 和 iView 写的详情页面的代码示例:
```
<template>
<div>
<h1>{{ title }}</h1>
<p>{{ content }}</p>
<p>{{ author }}</p>
<p>{{ date }}</p>
</div>
</template>
<script>
export default {
data() {
return {
title: '这是一个标题',
content: '这是详细内容',
author: '作者',
date: '2021-01-01',
};
},
};
</script>
<style>
/* 样式可以根据需求自行添加 */
</style>
```
希望这个示例能够帮到你!
相关问题
vue3+iview展现各自树的页面
首先,你需要在你的 Vue3 项目中安装 iview 组件库,可以使用以下命令:
```
npm install iview --save
```
然后你需要在你的 Vue3 项目中引入 iview 组件库。在你的 main.js 文件中添加以下代码:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import iView from 'iview';
import 'iview/dist/styles/iview.css';
createApp(App).use(iView).mount('#app')
```
接着,你需要创建两个组件来展示各自的树。你可以使用 iview 组件库中的 Tree 组件来展示树。例如,你可以创建以下两个组件:
```vue
<template>
<div>
<i-tree :data="treeData" :options="treeOptions"></i-tree>
</div>
</template>
<script>
export default {
name: 'TreeA',
data() {
return {
treeData: [
{
title: 'Node 1',
expand: true,
children: [
{
title: 'Child 1',
expand: true,
children: [
{
title: 'Grandchild 1'
},
{
title: 'Grandchild 2'
}
]
},
{
title: 'Child 2'
}
]
}
],
treeOptions: {
showCheckbox: true
}
}
}
}
</script>
```
```vue
<template>
<div>
<i-tree :data="treeData" :options="treeOptions"></i-tree>
</div>
</template>
<script>
export default {
name: 'TreeB',
data() {
return {
treeData: [
{
title: 'Node 1',
expand: true,
children: [
{
title: 'Child 1'
},
{
title: 'Child 2'
}
]
}
],
treeOptions: {
showCheckbox: false
}
}
}
}
</script>
```
最后,你需要在你的路由中定义这两个组件的路由。例如:
```javascript
import { createRouter, createWebHistory } from 'vue-router'
import TreeA from './components/TreeA.vue'
import TreeB from './components/TreeB.vue'
const routes = [
{ path: '/treeA', component: TreeA },
{ path: '/treeB', component: TreeB }
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
```
这样,你就可以在你的应用程序中访问这两个组件并展示各自的树了。例如,你可以在你的应用程序中使用以下链接来访问这两个组件:
```
http://localhost:8080/#/treeA
http://localhost:8080/#/treeB
```
用vue中的iview插件写一个登录页面
好的,下面是一个简单的示例代码:
```html
<template>
<div class="login-container">
<Form :model="form" :rules="rules" ref="form">
<FormItem label="用户名" prop="username">
<Input v-model="form.username" placeholder="请输入用户名"></Input>
</FormItem>
<FormItem label="密码" prop="password">
<Input type="password" v-model="form.password" placeholder="请输入密码"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="submitForm">登录</Button>
</FormItem>
</Form>
</div>
</template>
<script>
import { Form, FormItem, Input, Button } from "iview";
export default {
components: {
Form,
FormItem,
Input,
Button,
},
data() {
return {
form: {
username: "",
password: "",
},
rules: {
username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
password: [{ required: true, message: "请输入密码", trigger: "blur" }],
},
};
},
methods: {
submitForm() {
this.$refs.form.validate((valid) => {
if (valid) {
// 在这里提交登录表单
// 例如 this.$http.post('/api/login', this.form)
console.log("登录成功");
} else {
console.log("登录失败");
return false;
}
});
},
},
};
</script>
<style>
.login-container {
width: 400px;
margin: 50px auto;
}
</style>
```
这个示例中使用了 iview 的 Form、FormItem、Input、Button 组件。在 data 中定义了一个 form 对象,包含用户名和密码两个字段。同时还定义了 rules 对象,用于验证表单输入的合法性。在 methods 中定义了 submitForm 方法用于提交表单,在其中使用了 iview 的 validate 方法验证表单的合法性。如果表单验证通过,则可以在 submitForm 方法中调用接口提交表单。