欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

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

程序员文章站 2022-07-04 20:05:12
...

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/[email protected]/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>
相关标签： B站学习记录 vue html js

上一篇： day02 %d %s %f 占位符的使用

下一篇： HTML DOM 事件对象

推荐阅读