欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-07-06 16:11:06
前言:这个笔记主要内容为vue的计算属性、监听属性和样式绑定。让我们一起来看看吧!一、Vue的计算属性关键词:computed。用来处理一些复杂的逻辑,类似于在computed里面建立一个函数或方法。(1)一个例子假如需要反转一个字符串,我们会这么做:
{{message.split('').reverse().join('')}}
但是如果我们要在多处反转字符串,这样写反而麻烦,不利于多次调用,也不容易看懂理解。....

前言:这个笔记主要内容为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>

运行结果如下:
关于Vue的计算、监听、样式绑定
关于Vue的计算、监听、样式绑定
当两个框其中一个框改变时,都会相应的改变

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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