如何在 v

编程入门行业动态更新时间:2024-10-26 02:29:12

本文介绍了如何在 v-html 中以两种方式进行数据绑定?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个属性为 contenteditable="true" 的元素 div.这个 div 的行为就像一个元素 textarea.

<div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div>

我的代码:

data() {返回 {留言:'',}},方法: {enviaMensagem() {控制台.log(this.msg);}}

我的问题是数据绑定不起作用.在 div 中输入的内容不会反映在变量上.有谁知道它可能是什么?

解决方案

需要监听元素的变化，因为v-model只对</code>有效code> 或 <code><input></code>.您可以使用 <code>@input</code> 侦听器来执行此操作.</p><p>您像这样获得的标记将被转义.如果你想转义它，你可以使用例如这种方法.然后，您实际上在伪文本区域字段旁边有标记.那么，为什么不从一开始就使用 <code><textarea></code> 呢?</p><p></p></p></p><pre class="snippet-code-js lang-js Prettyprint-override"><code>new Vue({el: '#editor',数据: {留言:''},方法: {打字:功能(el){this.msg = el.target.innerHTML;},提交:函数(){console.log("提交:", this.msg);}}});</code></pre><p></p><pre class="snippet-code-css lang-css Prettyprint-override"><code>.input {显示:内联块；垂直对齐:中间；边框:1px纯黑色；宽度:200px；高度:100px；}.输出 {显示:内联块；垂直对齐:中间；宽度:200px；高度:100px；背景:#eee;}</code></pre><p></p><pre class="snippet-code-html lang-html Prettyprint-override"><code><script type="text/javascript" src="https://cdnjs.cloudflare/ajax/libs/vue/2.3.3/vue.min.js"></script><div id="编辑器"><div class="input" @input="typing" @keyup.enter="submit" contenteditable="true"></div><div class="output" v-html="msg"></div><p></code></pre><p><p><p></p><p>I have an element div with atribute contenteditable="true". This div behaves like an element textarea.</p><pre><code><div v-on:keyup.enter="SendMensage" v-html="msg" contenteditable="true"></div> </code></pre><p>my code:</p><pre><code>data() { return { msg: '', } }, methods: { enviaMensagem() { console.log(this.msg); } } </code></pre><p>My problem is that the databind does not work. What is typed in the div does not reflect on the variable. Does anyone know what can it be?</p> 解决方案 <p>You need to listen to changes of the element, because <code>v-model</code> only works on <code><textarea></code> or <code><input></code>. You can do this by using an <code>@input</code> listener.</p> <p>The markup you get like this will be escaped. If you want to unescape it, you can use e.g. this approach. Then, you actually have the markup right next to the pseudo-textarea field. So, why not using a <code><textarea></code> from begin with?</p> <p></p> </p> </p><pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({ el: '#editor', data: { msg: '' }, methods: { typing: function(el) { this.msg = el.target.innerHTML; }, submit: function() { console.log("Submitting: ", this.msg); } } });</code></pre><p> </p><pre class="snippet-code-css lang-css prettyprint-override"><code>.input { display: inline-block; vertical-align: middle; border: 1px solid black; width: 200px; height: 100px; } .output { display: inline-block; vertical-align: middle; width: 200px; height: 100px; background: #eee; }</code></pre><p> </p><pre class="snippet-code-html lang-html prettyprint-override"><code><script type="text/javascript" src="https://cdnjs.cloudflare/ajax/libs/vue/2.3.3/vue.min.js"></script> <div id="editor"> <div class="input" @input="typing" @keyup.enter="submit" contenteditable="true"></div> <div class="output" v-html="msg"></div> </div></code></pre><p> <p> <p> </p> <p>这篇关于如何在 v-html 中以两种方式进行数据绑定?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！</p> </div> <div class="elefans "> <p>更多推荐</p> <p>[db:关键词]</p></div> <div class="elefans pagebar"> </div> </article> <div class="elefans pcd_ad" style="margin: 10px 0px;"><script src=https://www.elefans.com/category/d/js/acmsd/thea10.js></script></div> <div class="elefans mbd_ad" style="margin-: 10px 0px;"></div> </div> <div class="elefans info"> <div> <span>本文发布于:2023-03-31 10:13:46，感谢您对本站的认可！</span></div> <div> <span>本文链接:</span><a href="https://www.elefans.com/category/jswz/34/801943.html" title="如何在 v">https://www.elefans.com/category/jswz/34/801943.html</a> </div> <div> <span>版权声明:本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。</span></div> </div> <span class="tag"><i class="iconfont icon-discount" style="font-size:12px;font-weight:bold;opacity:.7;">本文标签：</i><a href="https://www.elefans.com/category/e/tags/?tagname=%E5%A6%82%E4%BD%95%E5%9C%A8" target="_blank">如何在</a></span> <ul class="cl"> <li class="fl" style="max-width: 47%;"><span class="prev">上一篇：</span> <a href='https://www.elefans.com/category/jswz/34/801942.html'>什么是用户token（令牌）</a> </li> <li class="fr" style="max-width: 47%;"><span class="next">下一篇：</span> <a href='https://www.elefans.com/category/jswz/34/801944.html'>vscode拉取git代码到本地提示在签出前,请清理存储库工作树</a> </li> </ul> </div> <div class="elefans related"> </div> <script> function CheckPl(obj) { if(obj.txaArticle.value=="") { alert("您没什么话要说吗？"); obj.txaArticle.focus(); return false; } return true; } </script> <div class="elefans post_comments" id="comments">  <div id="comt-respond" class="commentpost"> <h4>发布评论<span><a rel="nofollow" id="cancel-reply" href="#comment" style="display:none;"><small>取消回复</small></a></span></h4> <form action="https://www.elefans.com/category/e/pl/doaction.php" method="post" name="saypl" id="frmSumbit" onsubmit="return CheckPl(document.saypl)"> <input name="id" type="hidden" id="id" value="801943" /> <input name="classid" type="hidden" id="classid" value="34" /> <input name="enews" type="hidden" id="enews" value="AddPl" /> <input name="repid" type="hidden" id="repid" value="0" /> <input type="hidden" name="ecmsfrom" value="https://www.elefans.com/category/jswz/34/801943.html"> <div class="elefans comt-box"> <script src="https://www.elefans.com/category/e/pl/loginjspl.php"></script>  </div>  <div id="comment-tools"> <div class="elefans tools_text"> <textarea placeholder="请在这里留言..." name="saytext" id="txaArticle" class="text input-block-level comt-area" cols="50" rows="4" tabindex="5">


       
      
      
        
           评论列表 （有 0 条评论）

如何在 v

问题描述

最近发表

热门文章

标签列表