德阳定制建站网站建设制作/seo优化服务商

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>