Todolist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>{{tit}}</h1>
<hr />
<div class="col-xs-2">
<input type="text" class="form-control" placeholder="" v-model="ipt">
</div>
<button class="btn btn-success" @click="tap()">增加</button>
<table class="table table-striped">
<thead>
<td>序号</td>
<td>内容</td>
<td>操作</td>
</thead>
<tbody>
<tr v-for="(item,i) in arr">
<td>{{i+1}}</td>
<td>{{item}}</td>
<td>
<button class="btn btn-danger" @click="tap1(i)">删除</button>
<button class="btn btn-primary" @click="tap2()">修改</button>
<button class="btn btn-info" @conclick="tap3()">查看</button>
</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#out",
data:{
tit:"Todolist",
ipt:"",
arr:[]
},
methods:{
tap(){
this.arr.push(this.ipt),
this.ipt=""
},
tap1(i){
this.arr.splice(i,1)
},
tap2(){
},
tap3(){
}
}
})
</script>
</html>
计算属性的小案例
//案例一:金额计算
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>金额计算</h1>
<div>单价:<input type="text" v-model="ipt1" />元</div>
<div>件数:<input type="text" v-model="ipt2" />件</div>
<div>运费:{{yunfei}}<span>元</span></div>
<div>总金额:{{jisuan}}<span>元</span></div>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#out",
data:{
ipt1:"",
ipt2:"",
yunfei:10,
totle:""
},
computed:{
jisuan(){
if(this.ipt1*this.ipt2>88){
this.yunfei=0;
return this.totle=this.ipt1*this.ipt2
}else{
this.yunfei=10;
return this.totle=this.ipt1*this.ipt2+this.yunfei
}
}
}
})
</script>
</html>
//案例二:数据筛选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>数据筛选</h1>
<input type="text" v-model="ipt"/>
<ul v-for="item in list">
<li>{{item}}</li>
</ul>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el:"#out",
data:{
ipt:"",
arr:["香蕉","香梨","苹果","干果","无花果","橘子","柠檬","橙子","桃子"]
},
computed:{
list(){
let arr1 = []
this.arr.map(function(item){
if(item.indexOf(this.ipt)!=-1){
arr1.push(item)
}
}.bind(this))
return arr1
}
}
})
</script>
</html>
过滤器的小案例
//过滤器实现订单状态的备注信息
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="out">
<h1>过滤器</h1>
<table class="table table-striped">
<thead>
<td>序号</td>
<td>产品</td>
<td>状态</td>
<td>备注</td>
</thead>
<tbody>
<tr v-for="(item,i) in obj">
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.status}}</td>
<td>{{item.status | glq}}</td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
Vue.filter("glq",function(value){
if(value==1){
return '已发送'
}
if(value==2){
return '待发送'
}
if(value==3){
return "发送中"
}
})
var vm = new Vue({
el:"#out",
data:{
obj:[
{name:"长裙",status:1},
{name:"上衣",status:2},
{name:"裤子",status:3},
{name:"裙子",status:1},
{name:"衬衫",status:3},
{name:"礼服",status:2}
]
}
})
</script>
</html>
注:上述引入的文件可以去bootcdn或者官网上面进行下载引入。也可以用网上的地址。
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>