vue基础之小案例

最新推荐文章于 2024-05-07 09:17:29 发布

keep789

最新推荐文章于 2024-05-07 09:17:29 发布

阅读量1.7k

点赞数

分类专栏： Vue 文章标签： vue 计算属性 vue的todolist

本文链接：https://blog.csdn.net/keep789/article/details/81878107

版权

Vue 专栏收录该内容

15 篇文章 4 订阅

订阅专栏

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>

keep789

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
vue基础之小案例

Todolist&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&quo
复制链接

扫一扫

专栏目录