2018-07-29 计算属性,监听属性,样式绑定

由computed表示计算属性：

image.png

<template>内：

<div >
    <div>{{message}}</div>
    <div>{{reversed}}</div>
  </div>

<script>内：

export default {
    name: 'home',
    data: function () {
      return {
        message: 'banana'
      }
    },
    computed: {
      reversed: function () {
        return this.message.split('').reverse().join('')
      }
    }
  }

computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

---

监听属性：
千克和斤的转换，初始的体重值是0；

image.png

通过v-modle监听二者的变化
代码：

<template>
  <div>
    <div class="bottom" >
      <div class="start-box" >
        <text class="start" >体重</text>
      </div>
      <div class="start-box" >
          <text class="font1">千克 : </text>
          <input type = "text" class="font1" v-model = "kgs">//kgs为千克的方法
      </div>
      <div class="start-box" >
          <text class="font1">斤 : </text>
          <input type = "text" class="font1" v-model = "gs">//同理
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data :{
            kgs:0,//给体重一个初始值
            gs:0,
        },
        watch : {//watch 会实时监听数据变化并改变自身的值
            kgs:function(val) {  //当监听到千克内的值改变
                this.kgs = val;//此时的kg为监听到的值
                this.gs = val * 2;//斤为监听值的2倍
            },
            gs : function (val) {
                this.kgs = val/ 2;
                this.gs = val;
            }
        }
    }
</script>

<style scoped>

  .bottom{
    height:690px;
    width:750px;
    align-items:center;
  }
  .start-box{
    margin-top:100px;
    height:180px;
    width:500px;
    background-color:#66BFA6;
    border-radius: 100px;
    align-items:center;
    justify-content: center;
  }
  .start{
    font-family: PingFangHK-Medium;
    font-size: 50px;
    color: #FFFFFF;
  }
    .font1{
        margin-bottom:10px;
        height:50px;
        fint-size:100px;
        color:darkred;
    }
</style>

千克和斤相互约束，并相对改变。

image.png

---

样式绑定：
为 v-bind:class 设置一个对象，从而动态的切换 class
显示：

image.png

此时代码为：//此时显示的颜色是 #afddff 淡蓝色

<template>
  <div>
    <div class="bottom" >
      <div v-bind:class="{startBox: isshow ,onbox:errorshow }" >
        <text class="start">体重</text>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data: {
            isshow:true,
            errorshow:true
        }
    }
</script>

<style scoped>

  .bottom{
    height:690px;
    width:750px;
    align-items:center;
  }
  .startBox{
    margin-top:100px;
    height:180px;
    width:500px;
    background-color:#66BFA6;
    border-radius: 100px;
    align-items:center;
    justify-content: center;
  }
  .onbox{
    background-color: #afddff;
  }
  .start{
    font-family: PingFangHK-Medium;
    font-size: 50px;
    color: #FFFFFF;
  }
</style>

由于我加了两个class样式绑定，那么后边的onbox的背景颜色便把startBox的背景颜色给覆盖掉了。如果我让绑定onbox的元素errorshow为false，则显示变为:

image.png

还有一种写法，也可：

<template>改为
 <div class="bottom" >
      <div v-bind:class="showclass" >
        <text class="start">体重</text>
      </div>
  </div>
<script>改为:
data: {
            showclass:{
                startBox:true,
                onbox:false
            }
}

另一种方法，用computed属性，script里的内容改为：

export default {
        name: "index",
        data: {
            isactive:true,
            isshow:false
        },
        computed:{
            showclass:function () {
                return{
                    startBox: this.isactive && !this.isshow,
                    onbox: this.isactive && this.isshow
                }
            }
        }
    }

<div>可以直接通过绑定style来绑定样式：
代码为：

<template>
  <div>
    <div class="bottom" >
      <div class="startBox" >
        <text v-bind:style="itstyle" >体重</text>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "index",
        data: {
            itstyle:{
                'font-size': 50+'px',
                color: '#FFFFFF'
            }
        },

    }
</script>