Vue.js 学习（二）

时间：2018-05-29 00:22:33 阅读：251 评论：0 收藏：0 [点我收藏+]

计算属性和监听属性

<div id="root">
    <label>姓：</label><input v-model="firstName" type="text">
    <label>名：</label><input v-model="lastName" type="text">
    <p>‘您输入的姓名是：{{Name}}</p>
</div>
<script>
    new Vue(
        {
            el: ‘#root‘,
            data: {
                firstName: ‘‘,
                lastName: ‘‘
            },
            computed:　　　　　　//计算属性
                {
                    Name: function () {
                        return this.firstName + this.lastName;
                    }
                }
　　　　　　　watch:{　　　　　　　　//监听属性
　　　　　　　　　　　　firstName:function()
　　　　　　　　　　　　{
　　　　　　　　　　　　　　...
　　　　　　　　　　　　}
　　　　　　　　　　}
        }
    )
</script>

computed计算属性，当参与计算的data没有发生变化的时候，会使用上一次计算的缓存值，只有当参与计算的变量发生变化时，才回去重新计算。性能比较高

watch监听属性，每当监听的值发生变化时就回去执行方法

v-if、v-show

<div id="root" >
    <div v-if="show">Hello World</div>
<button @click="handleClick">toggle</button>
</div>
<script>
    new Vue(
        {
            el: ‘#root‘,
            data: {
                show: ‘Hello World!‘    //变量为truly 真值即可，不一定非要true
            },
            methods:{
                handleClick:function()
                {
                    this.show=!this.show;
                }
            }
        }
    )
</script>

通过dom来看看两者的区别：

　-->原始的DOM节点

　-->v-if隐藏的DOM节点　　　　　　　-->v-show隐藏的DOM节点

不难看出，v-if会删除和重新创建挂载节点。而v-show仅仅是通过display=none来隐藏元素。应用场景可以根据两者的特性来取舍。

v-for

<div id="root">
    <ul >
        <li v-for="(item,index) in arrCity" :key="index">{{item.name}}:{{item.age}}</li>
    </ul></div>
<script>
    new Vue(
        {
            el: ‘#root‘,
            data: {
                arrCity:[{name:‘张三‘,age:20},{name:‘李四‘,age:21},{name:‘王五‘,age:32}]
            }
        }
    )
</script>