zoukankan      html  css  js  c++  java
  • vue中什么样的数据可以是在视图中显示

    1. Vue中不可以添加不存在的属性,因为不存在的属性是没有getter和setter的。

        <div id="app">
            {{msg.a}}
            {{msg.b}}
        </div>
        <script src="js/vue.js"></script>
        <script>
            let vm = new Vue({
                el: "#app",
                data: {
                    msg: {
                        a: 1
                    }
                }
            })
            vm.msg.b = 2; //这样添加数据不会在视图中显示出来
        </script>

    2. 关于如何添加一个动态属性我们可以使用Vue提供的方法:实例.$set(对象, 属性名, 属性值);

        <div id="app">
            {{msg.a}}
            {{msg.b}}
        </div>
        <script src="js/vue.js"></script>
        <script>
            let vm= new Vue({
                el: "#app",
                data: {
                    msg: {
                        a: 1
                    }
                }
            })
            vm.$set(msg, "b", 2) // 使用Vue提供的$set设置动态数据
        </script>

    3. 当然我们可以直接给对象赋予一个新值,新增也会有getter和setter方法

        <div id="app">
            {{msg.a}}
            {{msg.b}}
        </div>
        <script src="js/vue.js"></script>
        <script>
            let vm= new Vue({
                el: "#app",
                data: {
                    msg: {
                        a: 1
                    }
                }
            })
            vm.data = {a: 1, b: 2} // 赋予新值也可以添加动态数据
        </script>

    提示:我们想要使用某个数据,最好还是在 data对象中初始化方便以后使用哦!

  • 相关阅读:
    linux 安装软件的方式
    git 基本操作
    交叉编译
    windows下 打印机打印操作类 VS2015
    VS2015 下 unicode 字符转换类
    C++ 多线程日志类的使用
    编译模板实例化
    C++中如何使用switch字符串
    linux下静态库与动态库
    jsoncpp 解码编码 中文为空 乱码问题
  • 原文地址:https://www.cnblogs.com/wuxianqiang/p/8386962.html
Copyright © 2011-2022 走看看