关于Vue的计算、监听、样式绑定

前言：这个笔记主要内容为vue的计算属性、监听属性和样式绑定。让我们一起来看看吧！

一、Vue的计算属性

关键词：computed。

用来处理一些复杂的逻辑，类似于在computed里面建立一个函数或方法。

（1）一个例子

假如需要反转一个字符串，我们会这么做：

<div id="app">
    {{message.split('').reverse().join('')}}
</div>

但是如果我们要在多处反转字符串，这样写反而麻烦，不利于多次调用，也不容易看懂理解。

如果使用计算属性，就会方便许多，来看看吧：

<div id="app">
   <p>原始字符串：{{message}}</p>
   <p>计算属性后反转的字符串{{reversedMessage}}</p>
</div>
<script>
var vm = new Vue({
    el:"#app",
    data:{
        message:'我爱学习'
    },
    computed:{
        //计算属性的getter
        reversedMessage:function(){
            //this指向vm实例
            return this.message.split('').reverse().join('')
        }
    }
})
</script>

这个例子声明了一个计算属性reversedMessage，提供的函数将用作属性vm.reversedMessage的getter。当vm.message（依赖）的值改变时，vm.reversedMessage也会跟着更新改变。

（2）computed 和 methods 的比较

如果使用methods是这样的：

methods:{
	reversedMessage:function(){
	  return this.message.split('').reverse().join('')
   }
}

看了上面的代码，发现，诶，好像和methods没有什么区别嘛，确实，在效果上两个都是一样的。区别：

• 但是computed是基于它的依赖缓存，只有相关依赖发生改变是才会重新取值；
• 而在使用methods时，在重新渲染的时候，函数总会重新调用执行。

简答说就是，使用computed性能会更好，但是如果不希望有缓存，可以使用methods属性。

（3）computed的setter

computed属性默认只有getter，不过在需要的时候也可以直接提供一个setter：

<script>
var vm = new Vue({
    el:"#app",
    data:{
        name:"小花",
        age:"18"
    },
    computed:{
        site:{
            //getter
            get:function(){
              return this.name+' '+this.age
        },
        //setter
            set:function(newvalue){
                var names = newvalue.split('')//把用户输入的site分开
                this.name = names[0]
                this.age = names[names.length-1]
            }
        }
    }
})
//调用setter、vm.name和vm.age也会被对应更新
vm.site = '大花 31';      //这里已经改变了原来的数据
document.write('name: ' + vm.name);
document.write('<br>');
document.write('age: ' + vm.age);
</script>

运行结果为:

//没有调用之前
小花 18
//调用之后
name:大花
age：31

二、Vue的监听属性

监听属性 watch 就是当你监听的那个参数发生改变时，就会触发一个事件/函数。我们可以通过watch来响应数据的变化。

例如：要进行千米和米之间的转化，就可以使用监听

<div id="app">
    千米：<input type = "text" v-model = "km">
    米：<input type = "text" v-model = "m">
</div>
<p id="info"></p>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
            km:0,
            m:0
        },
        watch:{
            km:function(value){
                this.km = value;
                this.m = this.km * 1000
            },
            m:function(value){
                this.km = value/1000;
                this.m = value;
            }
        }
    });
    //$watch是一个实例方法
    //这里监听的是km的变化，当km变化时，就会响应
    vm.$watch('km',function(newvalue,oldvalue){
        //这个回调将在vm.km被改变后使用
       //新的值写在前面，旧的写在后面 
        document.getElementById("info").innerHTML = "修改前值为："+oldvalue + ",修改后的值为：" + newvalue;
    })
</script>

运行结果如下：


当两个框其中一个框改变时，都会相应的改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1yqp0eyN-1595323649777)(C:\Users\sandy燕\Desktop\2.JPG)]

是不是很好玩啊！！！！！

三、Vue的样式绑定

• class 和 style 是HTML元素的属性，用于设置元素的样式，在vue中我们可以通过v-bind来设置样式属性。
• v-bind 在处理class 和style时，专门增强了它。表达式的结果除了字符串之外，还可以是对象或数组。

class属性绑定

（1）为v-bind：class设置一个对象

<div v-bind:class="{'active':isactive}"></div>

当isactive的值为true时，则为这个div设置了active样的class

（2）在对象中传入更多属性来动态切换多个class

<div class="app" v-bind:class="{'aaa:isaaa','bbb:isbbb'}">
</div>
//则这个div有三个class，即app、aaa、bbb
<!--  <div class="app aaa bbb"></div>   
       当isbbb为true时，它会覆盖前面的class-->

（3）直接在data里绑定一个对象

<div id="app">
  <div v-bind:class="hhh"></div>//这里hhh为对象
</div>
<script>
new Vue({
  el: '#app',
  data: {
    hhh: {
      aaa: true, //这里aaa为一种class
      'bbb': true //这里bbb为一种class
    }
  }
})
</script>

（4）绑定返回对象的计算属性。这是一个常用且强大的模式

<div id="app">
  <div v-bind:class="classObject"></div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    isActive: true,
    error: {
      value: true,
      type: 'fatal'
    }
  },
  computed: {
    classObject: function () {
      return {
  base: true,
        active: this.isActive && !this.error.value,//判断是否为true
        'text-danger': this.error.value && this.error.type === 'fatal',//判断是否为true
      }
    }
  }
})
</script>

（5）数组语法

可以把一个数组传给v-bind：class

<div id="app">
	<div v-bind:class="[aaa, bbb]"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
      //这里的aaa bbb 都是class
    activeClass: 'aaa',
    errorClass: 'bbb'
  }
})
</script>

还可以使用三元表达式来切换列表中的class：

<div v-bind:class = "[hhhclass,isaaa ? aaaclass : '']"></div>

hhhclass是始终存在的，当isaaa值为true时添加aaaclass类。

Vue的style（内联样式）

（1）直接在v-bind里设置样式:

<div id="app">
    <div v-bind:style="{color:aaacolor,fontSize:size+'px'}">
        我爱学习
    </div>
</div>
<!-- 即为<div style="color:red;font-size:30px">我爱学习</div>-->

（2）直接绑定到一个样式对象，让模板更清晰：

<div id="app">
    <div v-bind:style="styleObject">我爱学习</div>
</div>
//styleobject在data里定义

（3）使用数组将多个样式对象应用到一个元素上;

<div id="app">
    <div v-bind:style="[aaastyle,bbbstyle]">我爱学习</div>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    aaastyles: {
      color: 'green',
      fontSize: '30px'
    },
	bbbstyles: {
      'font-weight': 'bold'
    }
  }
})
</script>

自动添加前缀

当 v-bind：style 使用需要添加 浏览器引擎前缀 的css property时，如 transform，vue. js会自动侦测并添加相应的前缀。

本文地址：https://blog.csdn.net/weixin_48931875/article/details/107493912