vue2 基础（四）

待我称王封你为后i 2022-05-27 12:44 194阅读 0赞

当你了解这个是怎么用的，是干嘛的，就可以了，更多，更具体的信息可以去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>

ok了，上面的message 就会解析成  html   代码了 ；

总结：（1）如何使用 v-html 指令

vue2 基础（四）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 VUE2快速入门(四)---组件基础用法

相关 Vue基础整理2

相关 vue2 基础（六）

相关 vue2 基础（五）

相关 vue2 基础（四）

相关 vue2 基础（三）

相关 vue2 基础（一）

相关 Vue2基础汇总

相关 Vue2.5基础

相关 vue基础2