vue实例属性和方法

最新推荐文章于 2024-06-18 22:30:16 发布

duansamve

最新推荐文章于 2024-06-18 22:30:16 发布

阅读量698

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/duansamve/article/details/81879690

版权

vue 专栏收录该内容

109 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
</head>

<body>
<div id="app">
    <input type="text" v-model="user.name"/>
    <p>{{msg}}</p>
    <p ref="hello">{{user.name}}</p>
    <p>{{getValue()}}</p>
    <p><button @click="add">add</button></p>
    <p><button @click="update">update</button></p>
    <p>{{user.age}}</p>
    <p><button @click="del">del</button></p>
</div>

<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script>
let vm = new Vue({
    el: '#app',
    name: 'Vue',
    data: {
        msg: 0,
        user: {
            id: 0,
            name: 'Samve'
        }
    },
    show: function(){
        alert('hello, world!');
    },
    methods: {
        getValue(){
            //$nextTick：等值加载后再获取
            this.$nextTick(function(){
                //获取DOM值
                console.log(this.$refs.hello.textContent);
            });
        },
        add(){
            //this.user.age = 20;//此种给对象添加属性的方式无效
            this.$set(this.user, 'age', 20);//用此种方法给对象添加属性
        },
        update(){
            this.user.age = 30;
        },
        del(){
            this.$delete(this.user, 'age');
        }
    }
});

//获取data中属性
console.log(vm.msg);
//获取el
vm.$el.style.color='red';
//vm.$data获取data中属性
console.log(vm.$data);
//vm.$options获取自定义属性
console.log(vm.$options.name);
vm.$options.show();
//vm.$refs获取所有添加ref属性的元素
vm.$refs.hello.style.color='blue';
//手动挂载vue实例
//vm.$mount("#app");
//new Vue({}).$mount("#app");
//$set、$delete：给对象添加、删除属性
</script>
</body>
</html>

duansamve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue实例属性和方法

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="https://cdn.bootcss.com/bootstr
复制链接

扫一扫

专栏目录