vue----02

1、计算属性与监听器
watch:{
  firstname: function () {
     //当firstname 改变的时候要执行的函数 
  }  
}    

computed: {
  name: function() {
       //内容 
}  
}

2、计算属性的getter和setter方法

computed: {
  fullname: {
      get: function() {
        //请求该计算属性时要执行的方法
    }
      set： function(value) {
        //修改计算属性某一值时要执行的方法
    }  
  }  
}   

3、vue中的样式绑定

 

<div>
    <div @click="handleClick"
         :class="[activated,activatedOne]"
    >
        hello world
    </div>
</div>

<script>
    var vm  = new Vue({
        el:"#app",
        data: {
            activatedOne: "actived-one",
            activated: "",
        },
        methods: {
            handleClick: function() {
                this.activated = this.activated === "activated" ? "" : "activated"
            }
        }
    })
</script>

 

4、vue中的条件渲染

<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<h1 v-show="ok">Hello!</h1>

v-show 已经被渲染到页面上了

v-if  没有渲染