计算属性与全选逻辑实现

最新推荐文章于 2023-04-12 16:09:42 发布

Silent Land

最新推荐文章于 2023-04-12 16:09:42 发布

阅读量388

点赞数 1

分类专栏： # Vue2 experience

本文链接：https://blog.csdn.net/weixin_44757417/article/details/110118299

版权

Vue2 同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

experience

29 篇文章 0 订阅

订阅专栏

计算属性

计算属性会将结果进行缓存
下次使用时，会先从缓存中得到，如果没有才会执行逻辑代码
当依赖发生改变时，缓存才会更新

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <p>
      姓：<input type="text" v-model="firstname">
    </p>
    <p>
      名：<input type="text" v-model="lastname">
    </p>
    <p>
      姓名: <span>{{fullname}}</span> 
    </p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
 new Vue({
    el:'#app',
    data:{
      firstname:'',
      lastname:''

    },
    computed: {
      fullname(){
        return this.firstname+""+this.lastname
      }
    },

})
</script>
</html>

计算属性中的getter与setter

get:从属性中取值时触发
set:从属性中赋值时触发

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>
      姓：<input type="text" v-model="firstname">
    </p>
    <p>
      名：<input type="text" v-model="lastname">
    </p>
    <p>
      姓名: <span>{{fullname}}</span>
    </p>
    <button @click="setfullname">点我赋值</button>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      firstname: '',
      lastname: ''

    },
    methods: {
      setfullname(){
        this.fullname = 'xiao ming'
      }
    },
    computed: {
      fullname: {
        //  将来从fullname中取值时触发
        get: function () {
          return this.firstname + "" + this.lastname
        },
        // 给fullname赋值时触发
        set: function (newValue) {
          var names = newValue.split(' ')
          this.firstname = names[0]
          this.lastname = names[1]
        }
      }
    },

  })
</script>

</html>

计算属性全选逻辑实现

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <h3>请选择你的技能</h3>
    <p>
      <label for="html">html</label>
      <input type="checkbox" v-model="ishtml">
    </p>
    <p>
      <label for="css">css</label>
      <input type="checkbox" v-model="iscss">
    </p>
    <p>
      <label for="js">js</label>
      <input type="checkbox" v-model="isjs">
    </p>
    <div>
      ishtml:{{ishtml}} <br>
      iscss:{{iscss}} <br>
      isjs:{{isjs}} <br>
    </div>
    <hr>
    <hr>
    <h3>全选</h3>
    <p>
      <label for="all">全选</label>
      <input type="checkbox" v-model="isall">
    </p>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      ishtml:false,
      iscss:false,
      isjs:false

    },
    methods: {
    },
    computed: {
      isall: {
        get:function (){
          // 原则：上面三个属性全为true,才为true,否则为false
          return this.ishtml && this.iscss && this.isjs
        },
        set:function(value){
          this.ishtml= value
          this.iscss = value
          this.isjs = value
          
        }
      }
    },

  })
</script>

</html>

效果：
在这里插入图片描述

Silent Land

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
计算属性与全选逻辑实现

计算属性计算属性会将结果进行缓存下次使用时，会先从缓存中得到，如果没有才会执行逻辑代码当依赖发生改变时，缓存才会更新<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&
复制链接

扫一扫