Vue.js 忽略 textarea 中的 html

Question

如何让 vue.js 完全忽略一个 html 块？现在它正在尝试解析 textarea 中的内容，当我需要忽略它时：

<textarea class="form-control" required="true" name="template_code" cols="50" rows="10">&lt;div style=&quot;width:300px;margin:0;padding:0;font-family:sans-serif;&quot;&gt;

    &lt;a href=&quot;{!! $dealer-&gt;url !!}&quot; style=&quot;line-height:0;&quot; target=&quot;_blank&quot;&gt;
            &lt;img src=&quot;{!! url(&#039;/&#039;) !!}/image_assets/dads/{{$ad-&gt;id}}/Top Image?time=&lt;?php echo md5($ad-&gt;updated_at); ?&gt;&quot; style=&quot;margin:0;padding:0;display:block;max-width:100%;&quot;&gt;
    &lt;/a&gt;

    &lt;div class=&quot;inventory-listings&quot; style=&quot;background:#{{ $ad-&gt;custom_settings[&#039;Border Color&#039;] }};padding:2px;height:246px;&quot;&gt;
        &lt;div class=&quot;inventory-inner&quot; style=&quot;background:#ffffff;padding:6px;&quot;&gt;
            &lt;p style=&quot;font-size:10px;letter-spacing:1px;text-transform:uppercase;text-align:center;margin:6px 0;&quot;&gt;Featured
                Inventory&lt;/p&gt;

            @foreach ($items as $item)
                &lt;div style=&quot;margin:1px 0;padding: 3px 0;border-top:1px solid #{{ $ad-&gt;custom_settings[&#039;Divider Color&#039;] }};&quot;&gt;
                    &lt;a href=&quot;{!! $item[&#039;url&#039;] !!}&quot;
                       style=&quot;display:block;text-decoration:none;overflow:auto;color:#{{ $ad-&gt;custom_settings[&#039;Link Item Color&#039;] }};&quot; target=&quot;_blank&quot;&gt;
                        &lt;div class=&quot;img-holder&quot; style=&quot;width: 20%;&quot;&gt;
                            &lt;img src=&quot;{!! action(&#039;ImageAssetController@show&#039;, [&#039;id&#039; =&gt; $item[&#039;image_id&#039;]]) !!}/&quot;
                                 style=&quot;margin:0;padding:0;display:block;float:left;margin-right:8px;max-width:100%;border-radius:4px;&quot;&gt;
                        &lt;/div&gt;
                        &lt;p style=&quot;margin: 4px 0 0 0;font-size:14px;&quot;&gt;{!! $item[&#039;year&#039;] !!} {!! $item[&#039;make_name&#039;] !!} {!! $item[&#039;model_name&#039;] !!}
                        &lt;/p&gt;
                    &lt;/a&gt;
                &lt;/div&gt;

            @endforeach

        &lt;/div&gt;
    &lt;/div&gt;

    &lt;a href=&quot;{!! $dealer-&gt;url !!}&quot; style=&quot;line-height:0;&quot; target=&quot;_blank&quot;&gt;
            &lt;img src=&quot;{!! url(&#039;/&#039;) !!}/image_assets/dads/{{$ad-&gt;id}}/Bottom Image?time=&lt;?php echo md5($ad-&gt;updated_at); ?&gt;&quot; style=&quot;margin:0;padding:0;display:block;max-width:100%;&quot;&gt;
    &lt;/a&gt;
&lt;/div&gt;
</textarea>

Answer 1

使用v-pre 指令：

<textarea v-pre class="form-control" name="template_code">
    contents will not be parsed
</textarea>

文档：https://vuejs.org/api/#v-pre