第二课 Vue中的数据绑定

Vue中的数据绑定

Vue中的数据绑定采用大胡子语法,即双{}进行数据绑定

基础示例:

复制代码
<div id="app">{{val}}<div>
<script>
new Vue({
    el: '#app',
    data: {
        val: 'Hello World !'
    }
})
</script>

数据绑定

1)内置data对象

Vue构造函数内部拓展了内置数据对象data,所有数据放置在data对象内(参考基础示例)

2)大胡子语法

DOM标签通过大胡子语法绑定相应的属性值,直接将data对象中的属性名写入即可(参考基础示例)

模板中的运算

模板(大胡子)中允许进行简单的JS运算

1)数值相加

复制代码
    <div id="app">{{val + 2}}</div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 1
            }
        })
    </script>   

2)字符串拼接

复制代码
    <div id="app">{{val + 'Peny'}}</div>
    <script>
        new Vue({
            el: '#app',
            data: {
                val: 'Hello '
            }
        })
    </script> 
  1. 三元运算

    复制代码
     <div id="app">{{val > 0 ? 'val大于0': 'val不大于0'}}</div>
     <script>
         new Vue({
             el: '#app',
             data: {
                 val: 0
             }
         })
     </script>   

4) 模板报错行为

a) 不允许出现变量定义行为

复制代码
<div>{{let val = 10}}</div>

b) 不允许出现条件判断语句

复制代码
<div>{{ if(true){ return true} }}</div>

c) 标签不成对

复制代码
<div>{{ val }}
相关推荐
代码小学僧2 分钟前
团队协作必备!pnpm 版本管理与 corepack 使用指南
前端·node.js·团队管理
一天睡25小时2 分钟前
前端工程化&&Webpack 和 Vite 的区别
前端·前端框架
gxn_mmf2 分钟前
页面需要重加载才能显示的问题修改
前端·bug
北京_宏哥3 分钟前
🔥Jmeter(二十五) - 从入门到精通 - JMeter函数 - 下篇(详解教程)
前端·jmeter·面试
天生我材必有用_吴用5 分钟前
鸿蒙开发入门到进阶:从布局基础到组件实战
前端·harmonyos·arkts
zhangxiao6 分钟前
自定义指令 - 去除所有空格和换行
前端
三思而后行,慎承诺6 分钟前
详解React Fiber架构中,reconcile阶段的具体工作流程
javascript·react.js·ecmascript
前端太佬7 分钟前
微信公众号网页登录:前端视角下的技术实现精要
前端·javascript·微信
Ryan今天学习了吗8 分钟前
如何在浏览器中渲染100万个元素,并且保证页面不卡顿?超详细底层原理图文分享
前端