美文网首页
Vue实例的属性 计算属性

Vue实例的属性 计算属性

作者: 我是江海洋我真的是江海洋 | 来源:发表于2018-09-14 14:35 被阅读0次

    body部分:

    <div id="app">
    {{message}}
    <p ref='hello'>你好</p>
    </div>
    js部分:

    var vm=new Vue({
    el:'#app',
    data:{
    message:'hello world'
    },
    uname:'jack',
    age:18
    })

    //el 获取Vue绑定的元素 console.log(vm.el)
    vm.el.style.color='pink' //data 获取Vue实例中的数据 console.log(vm.data)
    //options 获取Vue实例中的自定义属性
    console.log(vm.options.uname) console.log(vm.options.age)
    //refs 获取所有带ref属性的元素
    console.log(vm.refs) console.log(vm.refs.hello)
    计算属性:
    案例:hello Vue变成 Vue===hello 虽然{{}}可以解析数据,但是{{}}中不能写复杂的逻辑属性,所有复杂的业务逻辑都要使用计算属性

    <div id='itany'>

    <h1>{{msg}}</h1>
    <a href="#">{{revMsg}}</a>
    </div>

    new Vue({
    el:'#itany',
    data:{
    msg:'hello vue'
    },
    computed:{
    revMsg:function(){
    return this.msg.split(' ').reverse().join('===')
    }
    }
    })

    相关文章

      网友评论

          本文标题:Vue实例的属性 计算属性

          本文链接:https://www.haomeiwen.com/subject/fjeogftx.html