Vue实例选项之【data】

2023-11-11

data

通过 Vue 实例的 data 选项,可以声明应用内需要双向绑定的数据。建议所有会用到的数据都预先在 data 内声明,这样不至于将数据散落在业务逻辑中,难以维护。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue实例选项之【data】</title>
<!--    <script src="../vue.js"></script>-->
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>site: {{site}}</h1>
        <h1>url: {{url}}</h1>
        <h1>alexa: {{alexa}}</h1>
    </div>

    <script>
        var app = new Vue({
            el: '#app',
            data: { // 数据属性
                site: 'csdn',
                url: "https://www.csdn.net/",
                alexa: '1000',
                
                sites: [ // 数组
                    { name: 'Runoob' },
                    { name: 'Google' },
                    { name: 'Taobao' }
                ],

                object: { // 对象
                    name: 'csdn',
                    url: 'https://www.csdn.net',
                    slogan: '学的不仅是技术,更是梦想!'
                }
            }
        })
    </script>
</body>
</html>

显示效果

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue实例选项之【data】 的相关文章

随机推荐

  • private static final long serialVersionUID = 1L 的作用

    1 这句话的意思是定义程序序列化ID 2 什么是序列化 Serializable Java的一个接口 用来完成java的序列化和反序列化操作的 任何类型只要实现了Serializable接口 就可以被保存到文件中 或者作为数据流通过网络发送
  • 小程序视频播放组件《video》

    今天花了不少时间实现了在同一个页面上实现多个视频播放的功能 显示在同一个页面 可以上下拉动 效果如下图显示 具体代码如下 video wxml
  • Spring Boot项目中集成Apollo

    要在Spring Boot项目中集成Apollo 你可以按照以下步骤进行操作 步骤1 添加Apollo依赖 在你的Spring Boot项目的pom xml文件中添加Apollo依赖
  • 基于SpringBoot的校园疫情防控系统设计与实现

    1 概述 校园疫情防控系统的开发运用java技术 springboot框架 MIS的总体思想 以及Mysql等技术的支持下共同完成了该系统的开发 实现了校园疫情防控管理的信息化 使用户体验到校园疫情防控管理 管理员管理操作将更加方便 实现目
  • K8S-5--云原生基础/k8s基础及组件/二进制部署k8s集群

    一 云原生基础 CNCF 云原生容器生态系统概要 http dockone io article 3006 13年 docker项目正式发布 14年 kubernetes项目正式发布 15年 Google Redhat微软牵头成立CNCF
  • Linux route详解

    route命令用于显示和操作IP路由表 要实现两个不同的子网之间的通信 需要一台连接两个网络的路由器 或者同时位于两个网络的网关来实现 在Linux系统中 设置路由通常是 为了解决以下问题 该Linux系统在一个局域网中 局域网中有一个网关
  • 当用户在浏览器上输入url后发生了什么

    进行DNS域名解析 进行tcp连接 发起三次握手 发送一个http请求 服务器处理相关的请求 并且返回对应的结果 关闭tcp连接 浏览器将浏览器处理后的结果进行解析 浏览器将解析后的资源进行请求 并且渲染页面
  • 【翻译】为什么你现在比以往更需要混沌工程?

    大约一年前 像餐馆和杂货店这样的实体店正争先恐后地设置送货和路边取货 他们中的很多人都在生产中使用混乱工程 在推出新功能和服务之前迅速寻找失败的原因 教育平台也是如此 在短短一周的时间里 从 好的 变成了 绝对必要 企业混沌工程平台 Gre
  • Android UI设计 屏幕底部的菜单栏 动画切换Activity

    最终效果如下图 点击菜单会切换Activity 有动画效果 从早上起床就研究这个东西 因为之前一直都直接用系统提供的几个控件 从来没搞过图片背景 嵌套布局什么的 今天是第一次 没什么经验 花了一个上午才搞定 简单介绍一下思路 使用Linea
  • std::enable_shared_from_this的原理及意义

    原文 https www cnblogs com lehoho p 9372195 html 和 https www jianshu com p 4444923d79bd enable shared from this是一个模板类 定义于头
  • 【实战练习】汽油辛烷值优化建模(二)(问题一的详细讲解)

    1 问题回顾 问题1为数据处理 需参考近4年的工业数据 见附件一 325个数据样本数据 xlsx 的预处理结果 依 样本确定方法 附件二 对285号和313号数据样本进行预处理 原始数据见附件三 285号和313号样本原始数据 xlsx 并
  • Python3学习笔记(一) 基本数据类型(1)

    首先 Python3的变量不需要声明 曾经说的C语言的变量需要提前声明的好处现在也不是什么好处了 但是变量必须被赋值 赋值之后变量才会被创建 变量没有类型 直接写出来她的名字 里面装的什么内容 就好了 自然而然她就会有一个数据类型 由这里面
  • Java创建多线程的五种写法

    目录 一 lambda表达式 强烈推荐 最简单 基础格式 举例 运行结果 二 继承 Thread 重写 run 基础格式 举例 运行结果 三 实现 Runnable 重写 run 基础格式 举例 运行结果 四 使用匿名内部类 继承 Thre
  • 【华为OD机试python】不开心的小朋友【2023 B卷

    华为OD机试 真题 点这里 华为OD机试 真题考点分类 点这里 题目描述 游乐场里增加了一批摇摇车 非常受小朋友欢迎 但是每辆摇摇车同时只能有一个小朋友使用 如果没有空余的摇摇车 需要排队等候 或者直接离开 最后没有玩上的小朋友会非常不开心
  • C++实验03(03)组合类:Triangle类与Point类

    题目描述 定义一个平面坐标系下的点类Point 有整型数据成员x y坐标值 成员函数包括 1 带默认值的构造函数 默认值均为0 2 拷贝构造函数 3 置x y坐标值 4 取x y的坐标值 参数为两个整型量的引用 分别用于获取x y坐标值 5
  • 深入剖析Kubernetes之容器网络(一)

    文章目录 单机容器网络 容器跨主机网络 Kubernetes网络模型与CNI网络插件 单机容器网络 一个 Network Namespace 的网络栈包括 网卡 Network Interface 回环设备 Loopback Device
  • flink集群与资源@k8s源码分析-资源III 声明式资源管理

    1 资源 资源分析分3部分 资源请求 资源提供 声明式资源管理 本文是第三部分声明式资源管理 2 检查资源需求 检查资源声明 检查资源需求 检查资源声明是flink声明式资源管理的核心方法 上面的资源场景分为两类 提出资源需求和提供资源 检
  • LeetCode题目(Python实现):判断子序列

    文章目录 题目 想法一 遍历 t 算法实现 执行结果 复杂度分析 想法二 遍历 s 算法实现 执行结果 迭代器和生成器 算法实现 执行结果 利用 find 算法实现 执行结果 小结 题目 给定字符串 s 和 t 判断 s 是否为 t 的子序
  • VSCode学习【6】:vscode 文件目录缩进太小,目录树不明显

    1 打开Visual Studio Code 2 定位 英文版 File gt Preformences gt Settings 中文版 文件 gt 首选项 gt 设置 3 搜索 workbench gt tree
  • Vue实例选项之【data】

    data 通过 Vue 实例的 data 选项 可以声明应用内需要双向绑定的数据 建议所有会用到的数据都预先在 data 内声明 这样不至于将数据散落在业务逻辑中 难以维护 div div