vue2 基础（四）

最新推荐文章于 2024-06-25 21:40:27 发布

cvper

最新推荐文章于 2024-06-25 21:40:27 发布

阅读量112

点赞数

分类专栏： vue 文章标签： vue v-html

本文链接：https://blog.csdn.net/cvper/article/details/79999203

版权

vue 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去vue的官网去看文档；

这里只是用更为直观的方式让你了解一下vue；

---------------------------------------------------------------------------------------------------------------

本篇我们来看看 v-html指令的用法；

我们在之前了解了如何把数据渲染到页面上，我们再回忆一下：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  title>vue2基础</ 
  title> 
 
   < 
  script 
  src= 
  "vue.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  id= 
  "main"> 
 
   < 
  span>{{message}}</ 
  span> 
 
   </ 
  div> 
 
   < 
  script> 
 
  let abc 
  ={ 
 
   message: 
  "我是数据" 
 
   } 
 
  new 
  Vue({ 
 
   el: 
  "#main", 
 
   data:abc 
 
   }); 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>

上面我们通过 {{ }} 的方式把数据 message="我是数据" 输出到了页面中；

好的，上面没什么问题，我们再看看下面的这个例子：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  title>vue2基础</ 
  title> 
 
   < 
  script 
  src= 
  "vue.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  id= 
  "main"> 
 
   < 
  span>{{message}}</ 
  span> 
 
   </ 
  div> 
 
   < 
  script> 
 
  let abc 
  ={ 
 
   message: 
  "<span>我是新的内容哦<span>" 
 
   } 
 
  new 
  Vue({ 
 
   el: 
  "#main", 
 
   data:abc 
 
   }); 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>

最后在页面中显示的内容：<span>我是新的内容哦<span>

并没有解析成<span> ,也就是说 {{ }} 解析的都是文本，

那么我想把上面的内容解析成代码怎么办，那就需要用到 v-html 指令了，来看一下：

   <!DOCTYPE html> 
 
   < 
  html 
  lang= 
  "en"> 
 
   < 
  head> 
 
   < 
  meta 
  charset= 
  "UTF-8"> 
 
   < 
  title>vue2基础</ 
  title> 
 
   < 
  script 
  src= 
  "vue.js"></ 
  script> 
 
   </ 
  head> 
 
   < 
  body> 
 
   < 
  div 
  id= 
  "main"> 
 
   < 
  span 
  v-html= 
  "message"></ 
  span> 
 
   </ 
  div> 
 
   < 
  script> 
 
  let abc 
  ={ 
 
   message: 
  "<span>我是新的内容哦<span>" 
 
   } 
 
  new 
  Vue({ 
 
   el: 
  "#main", 
 
   data:abc 
 
   }); 
 
   </ 
  script> 
 
   </ 
  body> 
 
   </ 
  html>