VUE学习：vue基础18————计算属性-优快云博客

本文链接：https://blog.youkuaiyun.com/GAlbinus/article/details/117405574

提示：
VUE学习：VUE学习：vue基础18————计算属性

VUE学习：vue基础18————计算属性

前言
计算属性

前言

本文继续学习Vue相关内容。

提示：以下是本篇文章正文内容，下面案例可供参考

计算属性

计算属性的作用是为了使模板更加简单。

计算属性的基本方法

案例字符串翻转赋值

<body>
  <div id="app">
    <div>{{msg}}</div>
    <div>{{reverseString}}</div>
  </div>
  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao'
      },
      //计算属性的作用是为了使模板更加简单。
      computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
      }
    });
  </script>
</body>

计算属性与方法的区别

计算属性是基于依赖进行缓存的，而方法不缓存

<body>
  <div id="app">
    <div>{{reverseString}}</div>
    <div>{{reverseString}}</div>
    <div>{{reverseMessage()}}</div>
    <div>{{reverseMessage()}}</div>
  </div>
  <script type="text/javascript" src="js/vue.js"></script>
  <script type="text/javascript">

    var vm = new Vue({
      el: '#app',
      data: {
        msg: 'Nihao',
        num: 100
      },
      methods: {
        reverseMessage: function(){
          console.log('methods')
          return this.msg.split('').reverse().join('');
        }
      },
      computed: {
        reverseString: function(){
          console.log('computed')
          // return this.msg.split('').reverse().join('');
          var total = 0;
          for(var i=0;i<=this.num;i++){
            total += i;
          }
          return total;
        }
      }
    });
  </script>
</body>
//computed
//methods
//methods

计算属性的特点

1.计算属性必须有一个函数并且返回值

2.计算属性默认只读，不可更改

3.计算属性默认缓存依赖，多次渲染时，依赖如果没有变化则只会调用一次。

插值表达式中可以直接使用计算属性中的属性名，和调用data中的属性名方式一致

一般用于对数据有较为复杂的逻辑计算时使用，或者对于某些不希望被改变的值使用时，写在computed里面。(因为computed默认只读）

<body>
<div id="app">
	<p>过滤器：{{msg | formatterMsg}}</p>
	<p>过滤器：{{msg | formatterMsg}}</p>
	<p>计算属性：{{fms}}</p>
	<p>计算属性：{{fms}}</p>
	<p>调用方法：{{fmsg()}}</p>
	<p>调用方法：{{fmsg()}}</p>

	<p :title="com">{{com}}</p>
	<p>{{info}}</p>

	<button type="button" @click="msg='abc'">更改data</button>
	<button type="button" @click="com='abc'">更改computed</button>
	<button type="button" @click="info='llllllll'">更改info</button>
</div>
</body>
<script>
	let vm = new Vue({
		el: "#app",
		data: {
			msg:"hello world"
		},
		methods: {
			fmsg(){
				console.log("methods被调用！");
				return this.msg.replaceAll("l","L");
			}
		},
		/*过滤器：对内容进行格式化输出*/
		filters:{
			formatterMsg:function (val) {
				console.log("filters被调用");
				return val.replaceAll("l","L");
			}
		},
		/*计算属性是对data的补充*/
		computed:{
			/*计算属性中的属性名可以直接在插值表达式或指令中调用，和调用data中的值一样*/
			/*计算属性中的方法不能有参数！！！(默认为只读)*/
			/*计算属性的特点：默认缓存值：computed中的值多次渲染，不会重复调用，而方法每次渲染都会调用*/
			fms:function () {
				console.log("computed被调用");
				/*不会改变msg的值，会多出一个新的值fms*/
				return this.msg.replaceAll("l","L");
			},
			com(){
				return "我是计算属性";
			},
			/*计算属性可以设置setter方法，不推荐使用*/
			info:{
				get(){
					console.log("info的get被调用");
					return this.msg;
				},
				set(val){
					console.log("info的set被调用");
					if(val==="l"){
						this.msg="L";
					}else{
						this.msg=val;
					}

				}
			}
		}
	});
</script>