10. Vue-Vue 的{{}}、v-html、v-text

将元素当成纯文本输出

v-html

v-html会将元素当成HTML标签解析后输出

v-text

v-text会将元素当成纯文本输出

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Vue文本渲染三种方法</title>

</head>

<body>

    <div id="app">

         <!--   {}}/v-text不能解析html元素，只会照样输出 -->

         <p>{{hello}}</p>

        <p v-text = 'hello'></p>

        <p v-html = 'hello'></p>

    </div>

</body>

<script src="vue.js"></script>

<script>

    new Vue({

        el:'#app',

        data:{

            hello:'<span>hello world</span>'

        }

    })

</script>

</html>

运行结果：

参考：https://www.cnblogs.com/superlizhao/p/8466532.html

巴特西

10. Vue-Vue 的{{}}、v-html、v-text

{{ }}

v-html

v-text

代码：

运行结果：

最新文章

热门文章