1.计算属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<a href="">{{revMsg}}</a>
<h1>{{msg.split(' ').reverse().join('*****')}}</h1>
<!--vue===hello-->
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
msg:'hello vue'
},
methods:{},
filters:{},
computed:{
revMsg:function(){
return this.msg.split(' ').reverse().join('&&&&&&&')
}
}
})
</script>
</body>
</html>
2.计算年 月 日时间的方法（包括复习前面的东西）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
指令：
v-for="" 循环操作
v-model="" 双向数据绑定 表单元素
v-on:事件='值 ' 绑定事件 简写 @click=''
v-bind:属性='值' 绑定属性 简写 :bind=''
v-show="" 控制元素的显示或隐藏 sidplay:none;
v-if='值' 控制元素的显示或隐藏 visibility:hidden;
v-else-if
v-else
v-text=''
v-html='' 识别html标签
v-once 只绑定一次
v-pre 原样输出
v-cloak
过滤器：对页面上的数据进行筛选和过滤
全局过滤器
html
<p>{{num|过滤器的名字}}</p>
js
Vue.filter('过滤器的名字',function(){})
局部过滤器
new Vue({
el:'#itany',
data:{},
methods:{},
filters:{
过滤器的名字：function(){}
}
})
今天是2018年9月18日星期二，3点50分
-->
<script>
var date=new Date();
//年份
var year=date.getFullYear();
//月
var mon=date.getMonth()+1;
//日
var ri=date.getDate();
//星期
var week=date.getDay();
//时
var hour=date.getHours();
//分
var min=date.getMinutes();
//秒
var sec=date.getSeconds();
document.write(`今天是${year}年,${mon}月,${ri}日，星期${week}，${hour}点，${min}分，${sec}秒`)
</script>
</body>
</html>
3.单纯的计算两个数字的乘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<button @click='add'>加货</button>
<h1>{{total}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
new Vue({
el:'#app',
data:{
pack1:{price:5,count:3},
pack2:{price:4,count:6}
},
computed:{
total:function(){
return this.pack1.price*this.pack1.count+this.pack2.price*this.pack2.count
}
},
methods:{
add:function(){
this.pack1.count++;
}
}
})
</script>
</body>
</html>
4.num: Math.floor(Math.random()*(max-min+1)+min)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{num|addZero}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
// Vue.filter('addZero',function(data){
// if(data<10){
// return '0'+data;
// }else{
// return data;
// }
// })
new Vue({
el:'#app',
data:{
// num: Math.floor(Math.random()*(max-min+1)+min)
num: Math.floor(Math.random()*(20-0+1)+0)
},
filters:{
addZero:function(data){
if(data<10){
return '0'+data;
}else{
return data;
}
}
}
})
</script>
</body>
</html>
5.过渡属性2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<p>{{123.456|number}}</p>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('number',function(data){
return data.toFixed(2)
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
- 过度属性3计算年月日添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id='app'>
<h1>{{new Date()|date}}</h1>
</div>
<script src='js/vue.js'></script>
<script>
Vue.filter('date',function(date){
return date.getFullYear()+'年'+(date.getMonth()+1)+'月'+date.getDate()+"日,星期"+date.getDay()+date.getHours()+'点'+date.getMinutes()+'分'+date.getSeconds()+'秒'
})
new Vue({
el:'#app'
})
</script>
</body>
</html>
网友评论