文章内容来源于网络+实践
参考文章 https://www.cnblogs.com/yf-html/p/11378405.html
前端项目框架
vue2
一、div标签+contenteditable属性实现高度自适应
<div contenteditable=true ></div>
<!--<div>中的其他属性和样式使用各自项目前端的统一格式即可-->
此时,使用v-model进行双向数据绑定无效
二、双向数据绑定实现
html:
<!--content为绑定数据,改为本项目所需的数据即可-->
<div contenteditable="true" v-text="content" @input="handleInput"></div>
<!--<div>中的其他属性和样式使用各自项目前端的统一格式即可-->
js:
export default {
data() {
return {
// content为绑定数据,改为本项目所需的数据即可
content: ''
}
},
methods: {
handleInput($event){
// content为绑定数据,改为本项目所需的数据即可
this.content = $event.target.innerText;
// 拓展 如果想要只需要前100位数据
this.content = this.content.substring(0,100)
}
}
}