Vue鎬庝箞瀹炵幇contenteditable鍏冪礌鍙屽悜缁戝畾
扬州沐宇科技
2024-03-21 19:16:53
vue
鍦╒ue涓疄鐜癱ontenteditable鍏冪礌鐨勫弻鍚戠粦瀹氬彲浠ラ€氳繃v-model鎸囦护瀹炵幇銆備笅闈㈡槸涓€涓畝鍗曠殑绀轰緥锛?/p>
<template>
<div>
<div contenteditable="true" @input="updateContent" v-html="content"></div>
</div>
</template>
<script>
export default {
data() {
return {
content: '杩欐槸涓€涓猚ontenteditable鍏冪礌'
};
},
methods: {
updateContent(event) {
this.content = event.target.innerHTML;
}
}
};
</script>
鍦ㄤ笂闈㈢殑绀轰緥涓紝浣跨敤v-html鎸囦护灏哻ontenteditable鍏冪礌鐨勫唴瀹逛笌Vue瀹炰緥涓殑content灞炴€х粦瀹氾紝鍚屾椂閫氳繃@input浜嬩欢鐩戝惉鍐呭鐨勫彉鍖栵紝骞堕€氳繃updateContent鏂规硶鏇存柊content灞炴€х殑鍊硷紝瀹炵幇鍙屽悜缁戝畾銆傚綋contenteditable鍏冪礌鐨勫唴瀹瑰彂鐢熷彉鍖栨椂锛孷ue瀹炰緥涓殑content灞炴€т篃浼氶殢涔嬫洿鏂般€?/p>
下一条：如何选择java xml的解析库
