介绍

在vue中， {{ msg }} 是插值表达式，将数据解释为 普通文本，而非 HTML 代码。是最常见的功能

提示： 显示 html 代码，使用 v-html 指令

功能

1. 将数据填充到标签中
2. 支持 简单运算

例子

<div id="app">
    <!-- 字符串 -->
    <p>{{ msg }}</p> <!--页面展示：字符串-->
    <p>{{ num + 'aaa'}}</p><!--页面展示：1aaa-->
    <p>{{ msg.length }}</p> <!--页面展示：3-->

    <!-- 数值 -->
    <p>{{ num }}</p> <!--页面展示：1-->
    <p>{{ num+num1 }}</p> <!--页面展示：101-->
    <p>{{ num > num1 }}</p>  <!--页面展示：false-->
    <p>{{ num.toFixed(2) }}</p> <!--页面展示：1.00-->

    <!-- boolean -->
    <p>{{ flag }}</p> <!--页面展示：true-->

    <!-- 数组 -->
    <p>{{ arr }}</p> <!--页面展示：[1,2,3,4]-->
    <p>{{ arr[3] }}</p> <!--页面展示：4-->

    <!-- 对象 -->
    <p>{{ obj }}</p> <!--页面展示：{ "name": "tom", "age": 20 }-->
    <p>{{ obj.name }}</p> <!--页面展示：tom-->

    <!-- null/undefined/NaN -->
    <p>arg1：{{ arg1 }}</p> <!--页面展示：-->
    <p>arg2：{{ arg2 }}</p> <!--页面展示：-->
    <p>arg3：{{ arg3 }}</p> <!--页面展示：NaN-->

    <!-- 三目运算符 -->
    <p>{{ num > num1 ? "是" : "否" }}</p> <!--页面展示：否-->
</div>

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
    import { createApp } from './js/vue.esm-browser@3.5.13.js'

    createApp({
        data() {
            return {
                msg: 'Hello Vue!',
                num:1,
                num1:100,
                flag: true,
                arr: [1,2,3,4],
                obj:{
                    name:'tom',
                    age:20
                },
                arg1: null,
                arg2: undefined,
                arg3: NaN
            }
        }
    }).mount('#app')
</script>

缺点：会显示原始html

<div id="app">
    <p>{{ msg }}</p>
</div>

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
    import { createApp } from './js/vue.esm-browser@3.5.13.js'

    createApp({
        data() {
            return {
                msg: '<span style="color: red">红色字体样式</span>'
            }
        }
    }).mount('#app')
</script>

页面显示：<span style="color: red">红色字体样式</span>

解决

使用 v-html 显示html样式，详见链接：
https://www.malaoshi.top/show_1GWEerMTOpt.html

缺点：不能用在 标签的属性上

<div id="app">
    <a href="{{url}}">{{txt}}</a>
</div>

<script type="importmap">
{
    "imports": {
        "vue": "./js/vue.esm-browser@3.5.13.js"
    }
}
</script>
<script type="module">
    import { createApp } from './js/vue.esm-browser@3.5.13.js'

    createApp({
        data() {
            return {
                txt:'百度',
                url: 'http://www.baidu.com'
            }
        }
    }).mount('#app')
</script>

显示效果如下：

不能正确显示

解决

使用 v-bind 指令，将数据显示到标签的属性上，详见链接：
https://www.malaoshi.top/show_1GWF3cKdgT9.html

原文出处：/show_1GWMSpyxlhN.html