Vue.js入门学习 -- 计算属性Computed（十一）

每天若有时间，便会抽点出来，学点Vue的基础（因为不想被社会淘汰绝不是因为闲的慌）还是很嗨皮的，听着歌，对着网上的教程demo，先看一遍，看看自己是否能理解，如果理解不了，在看看demo的演示效果，从演示效果里面找点蛛丝马迹，如果还是理解不了，那就只能在本地亲自敲一遍demo跑一跑了，其实学习很简单，花点时间就OK了，其实健身也很简单，也是花点时间就OK的事，但是，坚持学习和坚持健身很难（这两件事我都在尽量"坚持"，但是有一件事情我是每天都坚持下来的 == 每天至少一包纯奶），废话不多好，直接上demo：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 计算属性</title>
  <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
  <div id="app">
    <label for="usernmae">用户名</label>
    <input type="text" id="username" v-model="message" placeholder="请输入用户名："/>
    <br>
    <br>
    <label for="rusername">用户名翻转</label>
    <span>{{reverseMessage}}</span>
    
    <br>
    ---------------------------
    <h1>联系我：{{about}}</h1>
  </div>
  <script>
    var a = new Vue({
      el: '#app',
      data: {
        message: "Appleyk",
        name:"CSDN",
        url:"https://blog.csdn.net/appleyk"
      },
      computed:{//computed 性能高于 method（不管值有么有变化，都要调用一次）
          //reverseMessage属性的getter == 依赖于缓存，如果message不变，不会重新计算（渲染）
        reverseMessage:function(){ //默认getter
            return this.message.split("").reverse().join("")
        },
        about:{
            //默认只有getter属性
            get:function(){
                return this.name+":"+this.url
            },
            //我们也可以添加setter属性
            set:function(newvalue){
                var values = newvalue.split(':')
                this.name = values[0]
                this.url  = values[values.length-1]        
            }
        }

      }
    })

  </script>
</body>
</html>

编辑器VSCode：

效果1（测试getter属性）：

效果2（测试setter属性）：

demo说明：

browser中测试：

Vue.js入门学习 -- 计算属性Computed（ 十一）

猜你喜欢

Vue.js入门学习 -- 计算属性Computed（十一）