条件判断和列表渲染

最新推荐文章于 2024-10-11 17:39:47 发布

m0_47761892

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量93

点赞数

分类专栏： Vue 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_47761892/article/details/128777645

版权

Vue 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

条件判断和列表渲染

数组更新检测：包括变异方法和非变异方法。
1.变异方法（会改变原始数组）：
push()、pop()、shift()、unshift()、splice()、sort()、reverse()
2.非变异方法（不会改变原始数组，而是返回一个新的数组）
filter()、concat()、slice()，

代码如下（示例）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择循环结构</title>
		<script src="js/v2.6.10/vue.js" type="text/javascript" charset="UTF-8"></script>
		<style type="text/css">
			span{
				display: inline-block;
				width: 70px;;
				
			}
		</style>
	
	</head>
	
	<body>
		<div id="app">
			<p>a：{{a}}</p>
			<p>b：{{b}}</p>
			<p v-if="a>b">a大于b</p>
			<!-- <p v-else>a小于b</p> -->
			<template v-if="show">
				<input name="A1" type="radio" value="A" />A
				<input name="A1" type="radio" value="B" />B
				<input name="A1" type="radio" value="C" />C
				<input name="A1" type="radio" value="D" />D
				{{show1(28)}}
			</template>
			<ul>
				<template v-for="(item,index) in items">
					<tr>
						<td>{{index+1}}.</td>
						<td v-for="(value,key) in item">{{key}}--{{value}}</td>
						<!--<td>{{item.name}}</td>
						<td>{{item.city}}</td>
						<td>{{item.spot}}</td>
						<td>{{item.price}}</td> -->
					</tr>
				</template>
				<!-- <li v-for="(item,index) in items" >{{index+1}}---{{item.name}}</li> -->
			</ul>
			<div v-for="n in 9">
				<span  v-for="m in n">
					{{m}}*{{n}}={{m*n}}
				</span>
			</div>
		</div>
		<script>
			var demo=new Vue({
				el:'#app',
				data:{
					name:'fjladkj',
					a:300,
					b:200,
					show:true,
					items:[
						{name:'zhangsan',city:'哈尔滨',spot:'伏尔加庄园',price:25.4},
						{name:'lisi',city:'青岛',spot:'栈桥',price:15.4},
						{name:'wangwu',city:'三亚',spot:'阳光沙滩',price:45.4}
					]
				},
				methods:{
					show1(i){
						// alert('天数是：'+i)
					}
				}
			})
			demo.items.push({name:'赵六',city:'上海',price:30.8
			})
			demo.items.forEach(function(el){
				console.log(el.price);
			})
			demo.items.filter(function(el){
				// console.log(el.price);
			})
			demo.items.sort(function(a,b){
				var x=a.price;
				var y=b.price
				return x<y?1:-1
			})
			
		</script>
	</body>
</html>