07. 过滤器
知识点
- filters
filters
格式化变量内容的输出。（日期格式化，字母大小写，数字再计算等等）
<div id="myApp"> <p>{{message}}</p> <p>{{message | toupper }}</p> <hr> <p>现在的vue.js学习进度是{{num}}({{num | topercentage}})。</p> </div> <script> var myApp = new Vue({ el: '#myApp', data: { message: 'hello vue.js world.', num: 0.3 }, filters: { toupper: function(value){ return value.toUpperCase(); }, topercentage: function(value){ return value * 100 + '%'; }, }, }); </script>
08. 计算属性
知识点
- computed
computed
处理元数据，便于进行二次利用。（比如：消费税自动计算功能）
<div id="myApp"> 今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。 </div> <script> var myApp = new Vue({ el: '#myApp', data: { price: 29980 }, computed: { priceInTax: function(){ return this.price * 1.08; }, priceChinaRMB: function(){ return Math.round(this.priceInTax / 16.75); }, }, }); </script>
09. 观察属性
知识点
- $watch
$watch
与computed属性类似，用于观察变量的变化，然后进行相应的处理。（我从Angular而来）
<div id="myApp"> <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p> <button @click="btnClick(10000)">加价10000円</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { price: 29980, priceInTax: 0, priceChinaRMB: 0, }, watch: { price: function(newVal, oldVal){ console.log(newVal, oldVal); this.priceInTax = Math.round(this.price * 1.08); this.priceChinaRMB = Math.round(this.priceInTax / 16.75); }, }, methods: { btnClick: function(newPrice){ this.price += newPrice; }, }, }); </script>
10. 设定机算属性
知识点
- setter
setter
设置计算属性，同步更新元数据的值。（又是令人费解的描述）
<div id="myApp"> <p>今年3月3日发卖的任天堂新一代主机Switch的价格是：{{price}}円，含税价格为：{{priceInTax}}円，折合人民币为：{{priceChinaRMB}}元。</p> <button @click="btnClick(10800)">把含税改价为10800円</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { price: 29980 }, computed: { priceInTax: { get:function(){ return this.price * 1.08; }, set: function(value){ this.price = value / 1.08; } }, priceChinaRMB: function(){ return Math.round(this.priceInTax / 16.75); }, }, methods: { btnClick: function(newPrice){ this.priceInTax = newPrice; }, }, }); </script>
11. Class绑定
知识点
- v-bind:class
v-bind:class
为html标记绑定样式单class属性。
<div id="myApp"> <div v-bind:class="{active:isActive}">红色文本1</div> <div :class="{active:isActive}">红色文本2</div> <button @click="btnClick">改变class吧</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { isActive: true, }, methods: { btnClick: function(){ this.isActive = false; }, }, }); </script>
12. Class对象绑定
知识点
- v-bind:class
v-bind:class
为html标记绑定样式单class对象。
<div id="myApp"> <div :class="myClass">红色文本</div> <button @click="btnClick">改变class吧</button> </div> <script> var myApp = new Vue({ el: '#myApp', data: { myClass: { active: true, big: true, }, }, methods: { btnClick: function(){ this.myClass.big = false; }, }, }); </script>
