【Vue】插值表达式 {{ }}

一、引入

插值表达式是一种Vue的模板语法

我们可以用插值表达式渲染出Vue提供的数据

68188649441

作用：利用表达式进行插值，渲染到页面中

表达式：是可以被求值的代码，JS引擎会将其计算出一个结果

以下的情况都是表达式：

money + 100
money - 100
money * 10
money / 10 
price >= 100 ? '真贵':'还行'
obj.name
arr[0]
fn()
obj.fn()

二、语法

插值表达式语法：{{ 表达式 }}

<h3>{{title}}<h3>

<p>{{nickName.toUpperCase()}}</p>

<p>{{age >= 18 ? '成年':'未成年'}}</p>

<p>{{obj.name}}</p>

<p>{{fn()}}</p>

三、错误用法

1.在插值表达式中使用的数据 必须在data中进行了提供
<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if   for ...
<p>{{if}}</p>

3.不能在标签属性中使用 {{  }} 插值 (插值表达式只能标签中间使用)，所以插值是用来展示给用户看的文本
<p title="{{username}}">我是P标签</p>

四、代码示例

<body>
    <!-- 
        插值表达式：Vue的一种模板语法
        作用：利用 表达式 进行插值渲染
        语法：{{ 表达式 }}

        注意点：
        1. 使用的数据要存在
        2. 支持的是表达式，不是语句  if  for
        3. 不能在标签属性中使用 {{ }}
    -->
    <div id="app">
        <p>{{ nickname }}</p>
        <!-- 将字符串转大写 -->
        <p>{{ nickname.toUpperCase() }}</p> 
        <p>{{ nickname + '你好' }}</p>
        <!-- 但凡是能求的结果的，都可以往这里面丢 -->
        <p>{{ age >= 18 ? '成年' : '未成年' }}</p>
        <!-- 对象也是可以的 -->
        <p>{{ friend.name }}</p>
        <p>{{ friend.desc }}</p>

        <!-- ----------------------- -->
        <!-- <p>{{ hobby }}</p> -->
        <!-- <p>{{ if }}</p> -->
        <!-- <p title="{{ nickname }}">我是p标签</p> -->
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
    <script>

        const app = new Vue({
            el: '#app',
            data: {
                nickname: 'tony',
                age: 18,
                friend: {
                    name: 'jepson',
                    desc: '热爱学习 Vue'
                }
            }
        })
    </script>
</body>