vue小结(二)v-text与v-html

2019年6月12日 发表评论 阅读评论

一、v-text与v-html

v-text指令的作用是:设置标签的内容(textContent),默认写法会替换全部内容,使用差值表达式{{}}可以替换指定内容, 内部支持写表达式。

v-html指令的作用是:设置元素的innerHTML,内容中有html结构会被解析为标签,v-text指令无论内容是什么,只会解析为文本,解析文本使用v-text,需要解析html结构使用v-html。

除此之外还有v-once、v-pre等标签,具体可以参看官方文档:https://cn.vuejs.org/v2/api 。

二、操作示例

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
  <!--v-text:正常文本输出,显示标签和标签的内容,
  v-html:解析标签,不显示标签,只显示标签中的内容,
  v-once:只绑定一次,vue中写的什么就输出什么,
  v-pre:原样输出,标签中写什么就输出什么,-->
   <div id="app">
      <input type="" v-model="msg">
      <p v-text="msg +'361way'"></p>
      <h2 v-text>{{msg}}</h2>
      <h3 v-html="htmlmsg +'361way'"></h3>
      <p v-pre>{{msg}}</p>
   </div>
   <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
       new Vue({
           el:"#app",
           data:{
               msg:"运维之路!!!",
               htmlmsg:'<a style="color:red" href="http://www.361way.com">运维之路</a>'
           }
       })
    </script>
</body>
</html>

上面的代码效果如下:

vue-text-html




本站的发展离不开您的资助,金额随意,欢迎来赏!

You can donate through PayPal.
My paypal id: itybku@139.com
Paypal page: https://www.paypal.me/361way

分类: http/html/web 标签:
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.