<html lang="en">
<head>
<meta charset="UTF-8">
<title>title>
<script src="../js/vue1.0.js">script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{}
});
}
script>
head>
<body>
<div id="box">
{{'welcome'|uppercase}}
<hr>
{{'WELCOME'|lowercase}}
<hr>
{{'welcome'|capitalize}}
<hr>
{{'WELCOME'|lowercase |capitalize}}
<hr>
{{12|currency}}
<hr>
{{12|currency '￥'}}
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js">script>
<script src="../js/vue-resource.js">script>
<script>
window.onload = function(){
var vm = new Vue({
data:{},
methods:{
show:function(){
alert(111)
}
}
}).$mount('#box');
}
script>
head>
<body>
<div id="box">
<input type="text" @keyup="show | debounce 2000">
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js">script>
<script src="../js/vue-resource.js">script>
<script>
window.onload = function(){
var vm = new Vue({
data:{
arr:[1,2,3,4,5,6],
arr2:["width","height","background","orange"],
arr3:["width","height","background","orange"],
b:''
},
methods:{
}
}).$mount('#box');
}
script>
head>
<body>
<div id="box">
<ul>
<li v-for="val in arr | limitBy 2">{{val}}li>
<hr>
<li v-for="val in arr | limitBy 1 2">{{val}}li>
<hr>
<li v-for="val in arr2 | filterBy 'a'">{{val}}li>
ul>
<hr>
<input type="text" v-model="b">
<ul>
<li v-for="val in arr3 | filterBy b">{{val}}li>
ul>
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js">script>
<script src="../js/vue-resource.js">script>
<script>
window.onload = function(){
var vm = new Vue({
data:{
arr:["width","height","background","orange"],
a:''
},
methods:{
}
}).$mount('#box');
}
script>
head>
<body>
<div id="box">
<ul>
<li v-for="val in arr | orderBy 1">{{val}}li>
<hr>
ul>
<hr>
<ul>
<li v-for="val in arr | orderBy -1">{{val}}li>
<hr>
ul>
<hr>
<input type="text" v-model="a">
<ul>
<li v-for="val in arr | orderBy a">{{val}}li>
<hr>
ul>
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js">script>
<script src="../js/vue-resource.js">script>
<script>
Vue.filter('toDob',function(num){
return num<10?'0'+num:num;
});
window.onload = function(){
var vm = new Vue({
data:{
a:'9'
},
methods:{
}
}).$mount('#box');
}
script>
head>
<body>
<div id="box">
{{a | toDob}}
div>
body>
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例方法title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<script src="../js/vue1.0.js">script>
<script src="../js/vue-resource.js">script>
<script>
Vue.filter('change_time',function(num) {
var oDate = new Date(num);
return oDate.getFullYear() + '-' + oDate.getMonth() + '-' + oDate.getDate() + ' ' + oDate.getHours() + ':' + oDate.getMinutes() + ':' + oDate.getSeconds();
});
window.onload = function(){
var vm = new Vue({
data:{
a:Date.now()
},
methods:{
}
}).$mount('#box');
}
script>
head>
<body>
<div id="box">
{{a | change_time}}
div>
body>
html>
