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

  • 相关阅读:
    mass Framework draggable插件
    将一段数字从右到左每隔三位插入一个逗号
    Firefox 12正式发布
    各大瀑布流简析与建议
    判定是否为非负整数
    mass Framework droppable插件
    HTML 5 <video> 标签
    SQL DELETE 语句
    SQL CREATE TABLE 语句(转)
    HTML <fieldset> 标签
  • 原文地址:https://www.cnblogs.com/nayitian/p/14984416.html
Copyright © 2011-2022 走看看