怎么使用Vue中的v-html

这篇文章主要介绍“怎么使用Vue中的v-html”，在日常操作中，相信很多人在怎么使用Vue中的v-html问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用Vue中的v-html”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

首先在网上下载了vue.min.js的文件。

我选择了v-html这个标记作为入门，它的作用是能够将变量中字符串类型的html文本以html标记的形式显示在页面上。例如：

<div id="div1">

<div v-html="h"></div>

</div>

<script type="text/javascript" class="lazy" data-src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围，不能直接使用body

data: { // 页面需要的vue数据

h: "<h2>Hello ,world</h2>"

}

});

</script>

哇，不错，页面终于出现了Hello, world，不错，接下来看看其他的简单的标签。

v-if 和v-show ，表示是否显示页面内容。

当if或者show中变量的值为true时，当前控件显示，false则不显示

<div id="div1">

<img v-show="checked" class="lazy" data-src="img/3.jpg" width="200" /><br />

</div>

<script type="text/javascript" class="lazy" data-src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围，不能直接使用body

data: { // 页面需要的vue数据

checked: false

}

});

</script>

然后，把v-show换成v-if，原来一样的。

接下来看看v-for标签吧，看起来作用应该是循环。

<div id="div1">

<ul>

<li v-for="(f, index) in arr">{{index}} {{f}}</li>

<li v-for="n in 10">{{n}}</li>

<li v-for="(v,k,index) in obj">{{index}}=={{k}}:{{v}}</li>

</ul>

</div>

<script type="text/javascript" class="lazy" data-src="js/vue.min.js"></script>

<script type="text/javascript">

var v = new Vue({

el: "#div1", // vue的有效范围，不能直接使用body

data: { // 页面需要的vue数据

arr: ["苹果", "香蕉", "梨子", "橘子"],

obj: {"name":"mary", "age":20, "sex":"女"}

}

});

</script>

到此，关于“怎么使用Vue中的v-html”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！