第二课 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 }}
相关推荐
brief of gali6 分钟前
记录一个奇怪的前端布局现象
前端
计算机毕设指导610 分钟前
基于 SpringBoot 的作业管理系统【附源码】
java·vue.js·spring boot·后端·mysql·spring·intellij-idea
前端拾光者44 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_181790144801 小时前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing2 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月2 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆2 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China2 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理