zoukankan      html  css  js  c++  java
  • VUE学习八,数据对象加入

    当一个 Vue 实例被创建时,它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。

    一、示范代码

    // 我们的数据对象
    var data = { firstname: 'CL', lastname: '张' }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
        el: '#app-8',
        data: data
    })
    
    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    console.log(vm.lastname == data.lastname);
    
    // 设置 property 也会影响到原始数据
    vm.lastname = '李';
    console.log(data.lastname);
    
    // ……反之亦然
    data.lastname = '王';
    console.log(vm.lastname);
    <div id="app-8">
        {{lastname}}
    </div>

    二、效果图

    三、整体代码

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>VUE简单示范</title>
    <script type="text/javascript" src="../js/vue.min.js" charset="utf-8"></script>
    </head>
    <body>
    <div id="app-8">
        {{lastname}}
    </div>
    <script>
    // 我们的数据对象
    var data = { firstname: 'CL', lastname: '' }
    
    // 该对象被加入到一个 Vue 实例中
    var vm = new Vue({
        el: '#app-8',
        data: data
    })
    
    // 获得这个实例上的 property
    // 返回源数据中对应的字段
    console.log(vm.lastname == data.lastname);
    
    // 设置 property 也会影响到原始数据
    vm.lastname = '';
    console.log(data.lastname);
    
    // ……反之亦然
    data.lastname = '';
    console.log(vm.lastname);
    </script>
    </body>
    </html>
    View Code

    本文参考:

    https://cn.vuejs.org/v2/guide/instance.html

  • 相关阅读:
    MySQL[MariaDB]安装与配置
    Docker介绍与安装使用
    Docker命令操作
    5G网络
    centos7单机部署腾讯蓝鲸运维平台6.0.2
    建立rsyslog日志服务器
    centos7.7安装oracle11g
    Linux pip命令报错 -bash: pip: command not found
    两种方式安装ansible
    centos7安装zabbix
  • 原文地址:https://www.cnblogs.com/nayitian/p/14984416.html
Copyright © 2011-2022 走看看