Vue插值表达式及语法

最新推荐文章于 2025-09-11 10:00:00 发布

原创最新推荐文章于 2025-09-11 10:00:00 发布 · 392 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了Vue.js中如何使用插值表达式来动态渲染数据，包括数据绑定的规则、表达式的限制以及在HTML模板中的应用实例，展示了如何在Vue组件中结合data和methods实现数据的显示和计算。

引包

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

插值表达式是一种Vue的模板语法，可以用插值表达式渲染出Vue提供的数据

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

1.在插值表达式中使用的数据必须在data中进行了提供

<p>{{hobby}}</p>  //如果在data中不存在 则会报错

2.支持的是表达式，而非语句，比如：if for ...

<p>{{if}}</p>

3.不能在标签属性中使用 {{ }} 插值 (插值表达式只能标签中间使用)

<p title="{{username}}">我是P标签</p>

示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>{{title}}<h3>
            <p>{{nickName.toUpperCase()}}</p>
            <p>{{age >= 18 ? '成年':'未成年'}}</p>
            <p>{{obj.name}}</p>
            <p>{{fn()}}</p>
            <p>{{age+50}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        const app=new Vue({
            el:'#app',
            data:{
                title:'插值表达式',
                nickName:'AaBbQqIiiss',
                age:19,
                obj:{
                    name:'陈陈'
                }
            },
            methods:{
                fn(){
                   return '这里返回一个字符串' 
                }
            }

        })
    </script>
</body>
</html>

运行结果