Vue模版语法之插值语法

最新推荐文章于 2024-07-23 21:45:00 发布

云远12189

最新推荐文章于 2024-07-23 21:45:00 发布

阅读量238

点赞数 5

分类专栏： VUE 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_41575632/article/details/136179672

版权

VUE 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

1. v-text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建页面</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--直接使用插值-->
    	插值语法直接使用{{}}插入变量:{{message}}
        <br>
        <!--直接使用插值-->
        v-text会改变标签中原有值,获得新值:<div v-text="message">一会我会被改变</div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp, reactive } = Vue
    createApp({
        data(){
            return{
                message:'Hello'
            }
        }
    }).mount('#root')
</script>

在这里插入图片描述

2. v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新建页面</title>
    <script type="text/javascript" src="./vue.global.js"></script>
</head>
<body>
    <div id="root">
        <!--使用v-html指令把变量中连带HTML传入标签中-->
        <div v-html="htmlMessage"></div>
    </div>
</body>
</html>
<script type="text/javascript">
    const { createApp, reactive } = Vue
    createApp({
        data(){
            return{
                htmlMessage:'<h1>这里是插入了HTML</h1>'
            }
        }
    }).mount('#root')
</script>