vue教程-插值表达式{{}}

作者：马育民 • • 阅读：10123

介绍

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

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

入门例子：vue教程-第一个程序

功能

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

例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
</head>
<body>
    <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>
</body>
<script>
    var app = new Vue({
        el: '#app', //找到id是app的元素
        data: { //数据
            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
        }
    })
</script>
</html>

缺点：会显示原始html

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
    <!-- 字符串 -->
    <p>{{ msg }}</p> <!--页面展示：字符串-->
</div>
<script>
    var app = new Vue({
        el: '#app', //找到id是app的元素
        data: { //数据
            msg: '<span style="color: red">红色字体样式</span>'
        }
    })
</script>

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

解决

使用 v-html 显示html样式

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

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
<div id="app">
    <div id="{{myid}}">aaa</p> 
</div>
<script>
    var app = new Vue({
        el: '#app', //找到id是app的元素
        data: { //数据
            myid: 'did'
        }
    })
</script>

显示效果如下：

不能正确显示

解决

使用 v-bind 指令，将数据显示到标签的属性上

感谢：
https://www.cnblogs.com/wuliangfan/p/11161725.html

原文出处：/show_1IXIOm0wjdy.html

吉ICP备15003043号