项目需求:我有一个输入框,当我输入内容的点击添加按钮的时候将输入的内容添加到页面显示出来,显示出来的同时根据后端接口放回我一句话vue
时间: 2024-03-06 12:48:33 浏览: 61
根据您的需求,您可以按照以下步骤进行操作:
1. 在Vue的模板中,使用一个输入框和一个添加按钮,同时使用一个列表来显示输入的内容。
2. 给添加按钮绑定一个点击事件,当点击按钮时,获取输入框中的值,并把它添加到列表中。
3. 通过Vue的生命周期钩子函数mounted()或created(),来调用后端接口,并根据返回值来显示一句话。
下面是一个示例代码,供您参考:
```
<template>
<div>
<input v-model="inputValue" type="text" placeholder="请输入内容">
<button @click="addItem">添加</button>
<ul>
<li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>
<p>{{ result }}</p>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '',
list: [],
result: ''
}
},
methods: {
addItem() {
if (this.inputValue !== '') {
this.list.push(this.inputValue);
this.inputValue = '';
}
}
},
mounted() {
// 调用后端接口
this.$http.get('/api/your-backend-api').then(response => {
this.result = response.data.result;
}).catch(error => {
console.log(error);
});
}
}
</script>
```
在上面的示例代码中,我们使用了v-model来实现输入框的双向绑定,使用了v-for指令来循环显示列表项。在addItem方法中,我们首先判断输入框中的值是否为空,如果不为空,则将其添加到列表中,并清空输入框中的值。在mounted()钩子函数中,我们使用了Vue的$http方法来调用后端接口,并将返回值显示在页面上。请注意,您需要根据实际情况来修改接口地址和返回值。
阅读全文