Vue指令(续)、小黑记事本案例

最新推荐文章于 2021-11-29 11:28:08 发布

退堂鼓职业选手

最新推荐文章于 2021-11-29 11:28:08 发布

阅读量196

点赞数

分类专栏： B站学习记录文章标签： vue html js

本文链接：https://blog.csdn.net/weixin_45886797/article/details/119510530

版权

B站学习记录专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Vueday2

文章目录

Vueday2

Vue指令(续)

v-show

v-show指令的作用是根据真假切换元素的显示状态
原理是修改元素的display,实现显示隐藏
指令后面的内容，最终都会解析为布尔值
值为true元素显示，值为false元素隐藏

v-if

作用:根据表达式的真假切换元素的显示状态
本质是通过操作dom元素来切换显示状态
表达式的值为true，元素存在于dom树中，为false从dom树中移除
频繁的切换使用v-show，反之使用v-if，前者的切换消耗小

v-bind

v-bind:属性名=表达式

v-bind指令作用是：为元素绑定事件
完整写法是：v-bind:属性名
简写的话可以直接省略v-bind，只保留:属性名
需要动态的增删class建议使用对象的方式

v-for

v-for指令的作用是：根据数据生成列表结构
数组经常和v-for结合使用
语法是==(item,index) in 数据==
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应的

v-model

v-model指令的作用:获取和设置表单元素的值(双向数据绑定)
绑定的数据会和表单元素值相关联

案例1：小黑记事本

样式存在不足，功能基本实现。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue学习</title>
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>  
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<style>
			div{
				width: 365px;
				border: 1px solid #ccc;
				background-color: #f5f5f5;
				box-shadow: 2px 2px 2px grey;
				margin-top: 100px;
				margin-left: 100px;
			}
			#app1{
				width: 365px;
				height: 200px;
				position: absolute;
				left: 13px;
				top:13px;
				z-index: -1;
			}
			#app2{
				width: 365px;
				height: 200px;
				position: absolute;
				left: 18px;
				top:18px;
				z-index: -2;
			}
			input{
				margin-top: 10px;
				margin-left: 40px;
				height: 40px;
				border: 0px;
				font-size: 22px;
				border-bottom: 1px solid #ccc;
				background-color: #f5f5f5;
			}
			li{
				width: 290px;
				height: 30px;
				font-size: 16px;
				margin-top: 10px;
				border-bottom:1px solid #ccc; 
				list-style: none;
				position: relative;
			}
			#show{
				display: inline-block;
				width: 180px;
				white-space:nowrap;
				overflow: hidden;
				text-overflow :ellipsis;
			}
			span{
				color: grey;
				font-size: 12px;
			}
			#del{
				position: absolute;
				right: 10px;
				cursor: pointer;
			}
			#count{
				margin-left: 40px;
			}
			#but{
				cursor: pointer;
				margin-left: 180px;
			}
			#but:hover,#del:hover{
				color: #000;
			}
		</style>
	</head>
	<body>
		<div id="app" ref="height1">
			<input v-model="inputValue"  @keyup.enter="add" type="text" autofocus="autofocus"  placeholder="请输入内容！"/>
			<ul>
				<li v-for="(item,index) in list">          <!--使用v-for根据数据生成列表结构-->
					<span id="show" >{{index+1}}.{{item}}</span>		 <!--用{{index+1}}显示数据的索引以及数据的每一项-->
					<span id="del" @click="remove(index)">&times;</span>            <!--&times;被转义成X-->
				</li>
			</ul>
			<span id="count" v-if="list.length!=0">
				共计<strong>{{ list.length }}</strong>条笔记</span>
			<span id="but" @click="clear()" v-show="list.length!=0">清空</span>
		</div>
		<script>
			var app = new Vue({
				el:"#app",
				data:{
					list:["I am iron man","爱的魔力看星星","5Galaxy"],
					inputValue:""   
				},
				methods: {
				  add:function(){   //添加数据方法，使用v-on和keyup.enter事件绑定
					this.list.push(this.inputValue);
				  },  
				  remove:function(index){
					  this.list.splice(index,1);
				  },
				  clear:function(){
					  this.list = [];
				  }
				  
				}
			})
		</script>
	</body>
</html>

退堂鼓职业选手

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue指令(续)、小黑记事本案例

Vueday2文章目录Vueday2Vue指令(续)v-showv-ifv-bindv-forv-model==案例1==：小黑记事本Vue指令(续)v-showv-show指令的作用是根据真假切换元素的显示状态原理是修改元素的display,实现显示隐藏指令后面的内容，最终都会解析为布尔值值为true元素显示，值为false元素隐藏v-if作用:根据表达式的真假切换元素的显示状态本质是通过操作dom元素来切换显示状态表达式的值为true，元素存在于dom树中，为fal
复制链接

扫一扫