Vue.js初次尝试,模板语法(六)

模板语法对于高效的编写web页面提供了便利。如果你有其他框架或者模板引擎的学习经验那么对于Vue.js的模板语法会很快的上手。当然如果没有其他的学习经验,也不用担心,Vue.js的社区文档写的很详细,花点时间阅读以下就明白了。

一、插值

如何将一个值在html元素中展示?正常的情况下使用{{}}两个花括号;但是这个不是银弹如果是要展示html代码呢?对于html代码,{{}}会将解析为普通的文本。

你可以直接复制如下代码,查看运行效果,这里呈现的都是正确的结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模板语法</title>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!--利用“{{}}”双花括号取值-->
        <p>{{message}}</p>

        <!--渲染html代码-->
        <div v-html="myTag"></div>

    </div>

</body>
</html>

<script type="text/javascript">
    //定义data数据,数据类型是Json对象
    var data = {message:"我是单纯的文字信息",myTag:'<p style="color: red">Hello world!</p>'};

    //创建Vue实例
    var app =new Vue({
        el:'#app',
        data:data
    })


</script>

如果你想尝试一下使用{{}}来渲染html代码,你会发现那些代码并没有被正确的解析。这时候可以使用v-html来处理。效果如下:

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章