DDR爱好者之家

vue中v-text / v-html使用实例代码详解
站长资源 2024/11/25 佚名
2 1538
DDR爱好者之家 Design By 杰米

废话少说，代码如下所述：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例中的数据,事件和方法</title>
</head>
  <script src="/UploadFiles/2021-04-02/vue.js">


显示123





<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue实例中的数据,事件和方法</title>
</head>
  <script src="/UploadFiles/2021-04-02/vue.js">


补充：vuejs {{}}，v-text 和 v-html的区别 





<div id="app">
　　<p>{{message}}</p> <!-- 输出：<span>通过双括号绑定</span> -->
　　<p v-html="html"></p> <!-- 输出：html标签在渲染的时候被解析 -->
　　<p v-text="text"></p> <!-- 输出：<span>html标签在渲染的时候被源码输出</span> -->
</div>


<script>
　　let app = new Vue({
　　el: "#app",
　　data: {
　　　　message: "<span>通过双括号绑定</span>",
　　　　html: "<span>html标签在渲染的时候被解析</span>",
　　　　text: "<span>html标签在渲染的时候被源码输出</span>",
　　}
 });
</script>





区别：


{{message}}：将数据解析为纯文本，不能输出真正的html，在页面加载时显示{{}}，所以通常使用v-html和v-text代替，且花括号方式在以后可能被取消


v-html="html"：输出真正的html


v-text="text"：将数据解析为纯文本，不能输出真正的html，与花括号的区别是在页面加载时不显示{{}}




总结


以上所述是小编给大家介绍的vue中v-text / v-html使用实例代码详解，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米