VUE计算属性关键词: computed

张哥编程

发布于 2024-12-19 14:15:12

1270

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>计算列属性</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>原始字符串:{{message}}</p>
      <p>计算后反转字符串:{{reversedMsg}}</p>
      <p>使用methods的反转字符串：{{reversedMsg2()}}</p>
    </div>
    <script>
      new Vue({
        el:'#app',
        data:{
          message:'www.csdn.net'
        },
        computed:{
          //计算属性的getter
          reversedMsg:function(){
            //this:指向new Vue()的实例;
            return this.message.split('').reverse().join('')
          }
        },
        methods:{
          reversedMsg2:function(){
            return this.message.split('').reverse().join('')
          }
        }
      })
    </script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>computed setter</title>
    <script src="js/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      <p>{{site}}</p>
    </div>
    <script>
      var vm=new Vue({
        el:'#app',
        data:{
          name:'Google',
          url:'http://www.51cto.com'
        },
        computed:{
          site:{
            //getter
            get:function(){
              return this.name+''+this.url
            },
            //setter
            set:function(newValue){
              var names=newValue.split(' ')
              this.name=names[0]
              this.url=names[names.length-1]
            }
          }
        }
      })
      //调用setter,vm.name和vm.url也会被对应更新;
      //vm.site='程序员俱乐部：http://www.csdn.net';
      console.log('name:'+vm.name);
      console.log('<br/>');
      console.log('url:'+vm.url);
    </script>
  </body>
</html>