2.Vue的style属性绑定+条件渲染+列表渲染

最新推荐文章于 2024-07-30 10:56:44 发布

pigpigpi

最新推荐文章于 2024-07-30 10:56:44 发布

阅读量1.8k

点赞数

分类专栏： Vue 文章标签： vue smalltalk iterator js javascript

本文链接：https://blog.csdn.net/qq_40733968/article/details/107761084

版权

Vue 专栏收录该内容

23 篇文章 2 订阅

订阅专栏

一.style属性绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>style属性绑定</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 绑定前 -->
		<div id="box">
			<div id="div1" style="color: red;font-size: 100px;">111</div>
			<!-- 绑定了style属性，值就是一个JSON对象，键用单引号引起来 -->
			<div id="div2" :style="{'color':'green','font-size':'200px'}">222</div>
			<!-- 一般不会把值给死 -->
			<div id="div3" :style="{'color':myColor,'font-size':mySize}">222</div>
			<!-- 设置json对象为变量 -->
			<div id="div4" :style="myJson">4444</div>
			<!-- 绑定多个json对象 -->
			<div id="div5" :style="[myJson,myJson2]">4444</div>

			<div id="div6" :style="">6666666666</div>

			<div id="div7" :style="{color:mycolor,fontSize:mysize}">
				777
				<button type="button" id="btn" @click="change(flag=!flag)">点击切换样式</button>
			</div>
			
		</div>

	</body>
</html>
<script type="text/javascript">
	const v = new Vue({
		el: "#div3",
		data: {
			'myColor': 'red',
			'mySize': '300px',
		}
	});
	const v2 = new Vue({
		el: "#div5",
		data: {
			'myJson': {
				'color': 'red',
				'font-size': '100px'
			},
			'myJson2': {
				'background': 'yellow',
				'border': '3px black solid',
			}
		}
	});
	new Vue({
		el:"#div7",
		data:{
			'flag':true,
			'mycolor':'black',
			'mysize':'100px'
		},
		methods:{
			change(flag){
				if(flag){
					this.mycolor='red';
					this.mysize='100px';
				}else{
					this.mycolor='green';
					this.mysize='300px';
				}
			}
		}
	})
</script>

二.事件

事件出来用v-on来绑定,@符号表示简写

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<button type="button" v-on:click="test()">按钮</button>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:'button',
		data:{
			'name':"张三"
		},
		methods:{
			test(){
				alert("我被按下去了");
				/* this在方法里指向当前Vue实例 */
				alert(this.name)
			}
		}
	})
</script>

有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：如阻止表单默认的提交行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<form action="#" method="get"  v-on:submit="stop($event)">
				用户名<input type="" name="username" id="" value="" /><br>
				密码<input type="" name="password" id="" value="" /><br>
				<input type="submit" value="提交" />
			</form>
		</div>

	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {

		},
		methods: {
			stop(e) {
				e.preventDefault();
			}
		}
	})
</script>

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻
辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。修饰符是由点开头的指令后缀来表示的。

阻止事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai{
				width: 400px;
				height: 400px;
				border: 1px black solid;
				
			}
			#nei{
				width: 200px;
				height: 200px;
				border: 1px black solid;
				
			}
			#div{
				width: 100px;
				height: 100px;
				border: 1px black solid;
				
			}
		</style>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<form action="#" method="get"  v-on:submit="stop($event)">
			<div id="wai">
				<div id="nei" @click="test1()">
					<div id="div" @click.stop="test2()">
						
					</div>
				</div>
			</div>
		</form>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#wai",
		data:{
			
		},
		methods:{
			test1(){
				alert(1)
			},
			test2(){
				alert(2);
			}
		}
	})
</script>

阻止默认行为

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<form action="#" method="get"  v-on:submit.prevent="stop()">
				用户名<input type="" name="username" id="" value="" /><br>
				密码<input type="" name="password" id="" value="" /><br>
				<input type="submit" value="提交" />
			</form>
		</div>

	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {

		},
		methods: {
			stop() {
				
			}
		}
	})
</script>

事件只触发一次

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<a :href="url" @click.once="test()">进入百度</a>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			'url':"http://www.baidu.com"
		},
		methods:{
			test(){
				alert("只能执行一次")
			}
		}
	})
</script>

按键修饰符

在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		
			<form action="#" method="get" >
				用户名<input type="" name="username" id="" value="" /><br>
				密码<input type="" name="password" id="" value="" /><br>
				<!-- 只有按下enter键时 才会提交 -->
				<input type="submit" value="提交" v-on:keydown.enter="submit"/>
			</form>
	
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			
		}
	})
</script>

条件渲染

1.V-if

v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div id="nei" v-if="num">啊哈,金色传1</div>
			<div id="nei" v-else>啊哈,金色传2</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: "#box",
		data: {
			'num':true
		}
	})
</script>

2.v-else-if

类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<span v-if="score >= 90">优秀</span>
			<span v-else-if="score >= 80">良好</span>
			<span v-else-if="score >= 60">及格</span>
			<span v-else>不及格</span>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					score:80
				}
			})
		</script>
	</body>
</html>

3.v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#demo{
				width: 200px;
				height: 100px;
				background-color: #7FFFD4;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="demo" v-show="flag">
				
			</div>
			<button @click="flag=!flag">显示/隐藏</button>
		</div>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					flag:true
				}
			})
		</script>
	</body>
</html>

列表渲染

1.遍历数组

我们可以用 v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 
	形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="box">
			<div id="app" v-for="item in arr">
				{{item}}
			</div>
			<div id="app2" v-for="(item,index) in arr2">
				{{item}}---{{index}}---{{arr2[index]}}
			</div>
			<!-- 你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法： -->
			<div id="app3" v-for="item of arr3">
				{{item}}
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			arr:["1","2","3","4"],
			arr2:["找","前","孙","李"],
			arr3:["1","22","333","4444"]
		}
	})
</script>

2.遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<div v-for="(value, name, index) in object">
				{{index}}---{{name}}---{{value}}
			</div>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el: '#app',
				data: {
					object: {
						title: 'How to do lists in Vue',
						author: 'Jane Doe',
						publishedAt: '2016-04-10'
					}
				}
			})
		</script>
	</body>
</html>

3.对数组的操作

push 		数组尾部添加元素
pop 		数组尾部删除元素
shift 		数组头部删除元素
unshift 	数组头部添加元素
splice 		添加/删除元素
sort	 	数组排序
reverse 	数组元素反转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="bos">
			<div id="nei" v-for="item in arr">
				{{item}}
			</div>
			<button type="button" id="btn" v-on:click="click()">按钮</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: "#bos",
		data: {
			arr: ["100", "200", "300", "400"]
		},
		methods: {
			click() {
				//1.push数组尾部添加元素
				this.arr.push("500");

				//2、通过索引值修改数组的元素不是响应式
				//this.arr[0] = '999';

				//3、pop():删除数组中最后一个元素
				this.arr.pop();
				//4、shift():删除数组第一个元素
				this.arr.shift();

				//5、unshift():在数组的头部添加元素
				this.arr.unshift('9999');

				//6、splice():删除元素、插入元素、替换元素
				//splice(起始元素下标，删除元素的个数，添加元素1,添加元素2,...)
				this.arr.splice(0, 2); /* 从下标为0的元素开始，删除两个元素 */
				
				this.arr.splice(1, 0, '8000', '9000'); /* 从下标为1的元素开始，不删除元素，添加'8000'和'9000' */
				
				this.arr.splice(2, 2, '1111'); /* 从下标为2的元素开始，删除两个元素，添加'1111' */
				

				//7、sort():排序
				//this.arr.sort();

				//8、reverse():反转
				this.arr.reverse();
				
			}
		}
	})
</script>

循环案例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item, index) in students">
					{{index}}---{{item.name}}---{{item.age}}---{{item.gender}}
					&nbsp;&nbsp;&nbsp;
					<a href="#" @click.prevent="del(index, item.name)">删除</a>
					&nbsp;&nbsp;&nbsp;
					<a href="#" @click.prevent='update(index, {
						id:4,
						name:"赵六",
						age:26,
						gender:"男"
					})'>修改</a>
				</li>
			</ul>
		</div>
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					students:[
						{
							id:1,
							name:'张三',
							age:23,
							gender:'男'
						},
						{
							id:2,
							name:'李四',
							age:24,
							gender:'男'
						},
						{
							id:3,
							name:'王五',
							age:25,
							gender:'男'
						}
					]
				},
				methods:{
					del(index, name) {
						if(window.confirm("你确定删除" + name + "吗?")) {
							this.students.splice(index,1);
						}
					},
					update(index, item) {
						if(window.confirm("你确定更新" + name + "吗?")) {
							this.students.splice(index, 1, item);
						}
					}
				}
			})
		</script>
	</body>
</html>