Vue插值表达式

Vue插值表达式

插值表达式的语法形式

{{表达式}}

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

表达式：是有数据的代码，js引擎能识别并且计算出结果的

2.注意事项：

（1）使用的数据必须存在（2）支持的是表达式，而非语句，比如if，for... （3）不能在标签属性中使用{{}}插值

3.特别使用：

表达式可以在{{}}中进行拼接以及其它的方式进行渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue实例</title>
</head>
<body>
<!---创建Vue实例，初始化渲染
    1.准备容器(Vue所管理的范围)
    2.引包（开发版本包/生产版本包）
    3.创建实例
    4.添加配置项=>完成渲染
-->
    <!---1.准备容器-->
    <div id="app">
        <p>{{msg}}</p>
        <p>{{msg.toUpperCase()}}</p>
        <!---这里的toUpperCase()可以令msg这个数据进行大写-->>
        <p>{{msg+shuju_two}}</p>
        <!--这里我将msg和shuju_two这两个数据进行拼接-->>
        <p>{{people.name}}</p>
        <!---这里测试在data中来锁定数据里面包含的数据能否渲染-->
        <p>{{people.name+'是'+people.xingqu+'青年'}}</p>
    </div>
    <!--2.引入开发版本包-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
    <script>
        //引入核心包以后，在全局环境中就有了Vue构造函数
        //3.创建实例
        const app = new Vue({
            //这里通过el配置标签 
            el:'#app',
            //通过data提供数据来渲染标签
            data:{
                msg:'Hello Word',
                shuju_one:66666,
                shuju_two:'v我五十吃麦当当',
                age:18,
                people:{
                    name_one:'gogo俊',
                    xingqu:'爱好打瓦'
                }
            }
        })
    </script>
</body>
</html>

效果图如下：

vue_two

posted @ 2025-11-12 20:34  scxlzb  阅读(3)  评论(0)    收藏  举报