06-vue条件渲染

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="lib/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<h2>订单列表</h2>
			<ul>
				<li v-for="item in datalist">
					{{item.title}}--
					<span v-if="item.state === 0">未付款</span>
					<span v-else-if="item.state === 1">已付款</span>
					<span v-else-if="item.state === 2">待发货</span>
					<span v-else="item.state === 3">已完成</span>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#box",
				data:{
					datalist:[
						{
							title:"1111",
							state:0
						},
						{
							title:"2222",
							state:1
						},
						{
							title:"3333",
							state:2
						},
						{
							title:"4444",
							state:3
						}
					]
				}
			})
		</script>
	</body>
</html>

使用v-if,v-else-if,v-else判断数据属性值,不同的属性值显示不同的提示文字内容。

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享
评论 抢沙发

请登录后发表评论