vue計算屬性
html代碼：
<div class="itany">
<p>{{msg}}</p>
<a href="#">{{erm}}</a>
</div>
js:
<script src="vue.js"></script>
<script>
new Vue({
el:".itany",
data:{
msg:"hello vue"
},
computed:{
erm:function(){
return this.msg.split(' ').reverse().join('====')
}
}
})
</script>
vue 屬性
html：
<div class="itany">
{{mas}}
<h1 ref="vue">hello</h1>
</div>
js：
<script src="vue.js"></script>
<script>
var v=new Vue({
el:'.itany',
data:{
mas:"你好"
},
uname:'jack',
age:18
})
// $el 獲取vue綁定的元素的
console.log(v.$el);
v.$el.style.color="red";
// $data 獲取vue實例中的數(shù)據(jù)
console.log(v.$data);
// $options 獲取vue實例中的自定義屬性
console.log(v.$options);
console.log(v.$options.uname);
console.log(v.$options.age);
// $refs 獲取所有帶ref屬性的元素
console.log(v.$refs.vue);
</script>
filter過濾 保留倆位小數(shù)
html：
<div id='itany'>
<p>{{123.456|number}}</p>
</div>
js：
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#itany',
filters:{
number:function(data){
return data.toFixed(2)
}
}
})
用過濾器獲取時間
html：
<div class="itany">
<p>{{new Date()|zero}}</p>
</div>
js：
<script src="vue.js"></script>
<script>
new Vue({
el:'.itany',
filters:{
zero:function(data){
return data.getFullYear()+'年'+(data.getMonth()+1)+'月'+data.getDate()+'日'+'星期'+data.getDay()+','+data.getHours()+'點'+data.getMinutes()+'分'+data.getSeconds()+'秒'
}
}
})
</script>
