<el-input class="talk_word" style="border:none;" id="talkwords" v-model="str2" placeholder="说点什么吧~~~" @input="input_change($event)" @focus="input_focus($event)" @mouseout="input_blur($event)" @keyup.enter.native="add_data()"> </el-input>换成input框
时间: 2023-07-24 18:14:02 浏览: 42
你可以使用以下代码将 `<el-input>` 替换为 `<input>`:
```html
<input class="talk_word" style="border:none;" id="talkwords" v-model="str2" placeholder="说点什么吧~~~" @input="input_change($event)"
@focus="input_focus($event)" @blur="input_blur($event)" @keyup.enter="add_data()">
```
注意,`@mouseout` 事件被替换为 `@blur` 事件,因为 `mouseout` 在 `<input>` 上没有意义。此外,`@keyup.enter.native` 也被简化为 `@keyup.enter`。
相关问题
<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea"> </el-input>怎么使用
<el-input>是Element UI中的一个输入框组件,用于接收用户的输入。在你提供的代码中,<el-input>被设置为一个多行文本框(textarea)类型的输入框,具有2行高度,并且有一个占位符(placeholder)为"请输入内容"。同时,它使用了Vue.js的双向绑定(v-model)将用户输入的内容与一个名为"textarea"的数据属性进行绑定。
要使用<el-input>组件,你需要按照以下步骤进行操作:
1. 在你的Vue.js项目中引入Element UI库,并确保已正确安装和配置。
2. 在需要使用<el-input>的组件中,添加<el-input>标签。
3. 根据你的需求,设置<el-input>的各种属性和事件。
4. 使用v-model指令将<el-input>与一个数据属性进行双向绑定,以便获取用户输入的值。
下面是一个示例代码,展示了如何使用<el-input>组件:
```html
<template>
<div>
<el-input
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="textarea"
></el-input>
<p>用户输入的内容:{{ textarea }}</p>
</div>
</template>
<script>
export default {
data() {
return {
textarea: '' // 初始化textarea数据属性
}
}
}
</script>
```
在上述示例中,<el-input>组件被放置在一个包裹元素中,并且使用了一个段落标签(<p>)来展示用户输入的内容。通过v-model指令,用户输入的值会自动绑定到data属性中的textarea变量上,你可以在组件中使用该变量来获取用户输入的内容。
<el-form-item <el-input 在一起的时候 设置<el-form-item border=false没有作用
如果您想要在 `<el-input>` 和 `<el-form-item>` 之间移除边框,您可以使用 `<el-form>` 的 `:border` 属性来控制整个表单的边框显示。
示例代码如下:
```html
<template>
<el-form :border="false">
<el-form-item>
<el-input placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</template>
```
如果您需要更细粒度地控制 `<el-form-item>` 的边框显示,可以尝试使用 CSS 来设置边框样式,如下所示:
```html
<template>
<el-form>
<el-form-item class="no-border">
<el-input placeholder="请输入内容"></el-input>
</el-form-item>
</el-form>
</template>
<style scoped>
.no-border {
border: none;
}
</style>
```
这样就可以移除 `<el-form-item>` 的边框了。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)