v-text 底层原理是应用的innerText 简写：{{}} 例： <h2 v-text="1+1"></h2> <span>{{item.newtype}}</span>

最新推荐文章于 2022-10-19 21:42:40 发布

鲸是鲸鱼的鲸

最新推荐文章于 2022-10-19 21:42:40 发布

阅读量483

点赞数

文章标签： Vue v-text {{}}

本文链接：https://blog.csdn.net/weixin_44195250/article/details/97234609

版权

Vue 专栏收录该内容

53 篇文章 0 订阅

订阅专栏

先看效果
在这里插入图片描述

在这里插入图片描述

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-text="msg"></h2>
        <h2 v-text="1+1"></h2>
        <h2 v-text="msg.length"></h2>
        <h2 v-text="msg.slice(1)"></h2>
        <h2 v-text="p"></h2>
        <hr>
        <!-- <h2  v-cloak>{{msg}}</h2>
        <h2  v-cloak>{{1+1}}</h2>
        <h2  v-cloak>{{msg.length}}</h2>
        <h2  v-cloak>{{msg.slice(1)}}</h2>
        <h2  v-cloak>{{p}}</h2> -->

    </div>
</body>
</html>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            msg:"1910",
            p:"<p>不要睡觉</p>"
        }
    })

    /*
        v-text:值为data中的数据
            1、解析data中的数据 
            2、可以解析JS的表达式 

        v-text的底层原理是应用的innerText


        v-text简写：{{}}
    
    */


</script>

鲸是鲸鱼的鲸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
v-text 底层原理是应用的innerText 简写：{{}} 例： <h2 v-text="1+1"></h2> <span>{{item.newtype}}</span>

先看效果 <html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" ...
复制链接

扫一扫