Vue案例：任务列表之数据渲染

来自CloudWiki
跳转至： 导航， 搜索

基本版

效果图

Vue2023032501.png

原理

数据双向绑定，从JS中读取数据并渲染

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

		<title></title>
	</head>
	<body><div id="app">>
		<div class="home">
			<h2>任务列表</h2>
			<ul>
				<li v-for="(item,index) in tasklist" :key="index" >
				  <input type="checkbox" v-model="item.isFinish">{{item.isFinish}}  {{item.title}}
				</li>
				
			</ul>

			<div>
				任务总数：3 还有3未完成：【<a href="#">完成</a>】
			</div>
			<div>
			    <input type="text" placeholder="请输入任务名称">
				<button>添加</button>
			</div>
		</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					tasklist:[
					 {title:"预习vuex知识点",isFinish:false},
					 {title:"预习vuex知识点2",isFinish:false},
					 {title:"预习vuex知识点3",isFinish:false},
					]
				}
			})
		</script>
		<style >
		     *{
			   margin:0;
			 }
			 .home{
			    width:400px;
				margin:0 auto;
				background-color:pink;
				line-height:30px;
				padding:10px;
			 }
			 h2{
				text-align:center;
			 }
			 ul {
			    text-align:left;
			 }
			 ul li{
				list-style:none;
			 }

			 
			 
		</style>
	</body>
</html>

绑定类属性

效果图

Vue2023032502.png

原理

在基础版的基础上 添加了样式类的动态绑定

如 :class="{finish:item.isFinish}， 当item.isFinish为真时盒子绑定finish这个类属性

更多样式类的动态绑定内容，可以查看这里：https://www.jb51.net/article/202786.htm

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

		<title></title>
	</head>
	<body><div id="app">>
		<div class="home">
			<h2>任务列表</h2>
			<ul>
				<li v-for="(item,index) in tasklist" :key="index" :class="{finish:item.isFinish}">
				  <input type="checkbox" v-model="item.isFinish">{{item.isFinish}}  {{item.title}}
				</li>
				
			</ul>

			<div>
				任务总数：3 还有3未完成：【<a href="#">完成</a>】
			</div>
			<div>
			    <input type="text" placeholder="请输入任务名称">
				<button>添加</button>
			</div>
		</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					tasklist:[
					 {title:"预习vuex知识点",isFinish:false},
					 {title:"预习vuex知识点2",isFinish:false},
					 {title:"预习vuex知识点3",isFinish:false},
					]
				}
			})
		</script>
		<style >
		     *{
			   margin:0;
			 }
			 .home{
			    width:400px;
				margin:0 auto;
				background-color:pink;
				line-height:30px;
				padding:10px;
			 }
			 h2{
				text-align:center;
			 }
			 ul {
			    text-align:left;
			 }
			 ul li{
				list-style:none;
			 }
			 .finish{
				color:gray;
				text-decoration:line-through
			 
			 }
			 
			 
		</style>
	</body>
</html>

添加计算属性

效果图

Vue2023032601.png

原理

用计算属性 计算出 未选中的数量，从而完成页面的简单计算。

表达式的逻辑过于复杂的时候，都应当考虑使用计算属性。

计算属性是以函数形式，在Vue实例的选项对象的compute选项中定义。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">

<script src="https://cdn.staticfile.org/vue/2.7.0/vue.min.js"></script>

		<title></title>
	</head>
	<body><div id="app">>
		<div class="home">
			<h2>任务列表</h2>
			<ul>
				<li v-for="(item,index) in tasklist" :key="index" :class="{finish:item.isFinish}">
				  <input type="checkbox" v-model="item.isFinish">{{item.isFinish}}  {{item.title}}
				</li>
				
			</ul>

			<div>
				任务总数：{{tasklist.length}} 还有{{finishCount}}未完成：【<a href="#">完成</a>】
			</div>
			<div>
			    <input type="text" placeholder="请输入任务名称">
				<button>添加</button>
			</div>
		</div>
		</div>
		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					tasklist:[
					 {title:"预习vuex知识点",isFinish:false},
					 {title:"预习vuex知识点2",isFinish:false},
					 {title:"预习vuex知识点3",isFinish:false},
					]
				},
				computed:{
					finishCount(){
					   let count = 0;
					   this.tasklist.forEach(item=>{
						  if(!item.isFinish){
							count++;
						  }
					   })
					return count
			      }
			    }
			 
			})
		</script>
		<style >
		     *{
			   margin:0;
			 }
			 .home{
			    width:400px;
				margin:0 auto;
				background-color:pink;
				line-height:30px;
				padding:10px;
			 }
			 h2{
				text-align:center;
			 }
			 ul {
			    text-align:left;
			 }
			 ul li{
				list-style:none;
			 }
			 .finish{
				color:gray;
				text-decoration:line-through
			 
			 }

			 
		</style>
	</body>
</html>
取自“http://www.openbrains.net/mediawiki/index.php?title=Vue案例：任务列表之数据渲染&oldid=32711”