Vue.js学习课程(2 / 6)
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>