vue的两个案例

最新推荐文章于 2024-07-23 17:22:52 发布

cherry...a

最新推荐文章于 2024-07-23 17:22:52 发布

阅读量376

点赞数

本文链接：https://blog.csdn.net/qq_46466568/article/details/108863756

版权

千米和米的转换

<!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">
			千米：<input type="text" name="" id="" value="" v-model="qianmi"/>
			米：<input type="text" name="" id="" value="" v-model="mi"/>
		</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el:"#box",
		data:{
			msg: "hello vue",
			qianmi:"",
			mi:"",
		},
		watch:{
			qianmi:function(value){
				this.qianmi = value;
				this.mi = value*1000;
			},
			mi:function(value){
				this.qianmi = value/1000;
				this.mi = value;
			}
		}
	});
</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" align="center">
			
			<img v-bind:src="imgUrl" width="250px" height="350px">
			<br>
			<button @click="show()">美女1按钮</button>
			<button @click="test()">美女2按钮</button>
			<button @click="haha()">美女3按钮</button>
		</div>
	</body>
</html>
<script type="text/javascript">
	//指令：特殊的行间属性，在vue中的指令都是以 v-开头
	new Vue({
		el:"#box",
		data: {
			imgUrl:"img/girl1.jpg"

		},
		//定义事件的处理函数的
		methods: {
			show() {
				this.imgUrl="img/girl1.jpg";
			},
			//es6的语法
			test() {
				this.imgUrl="img/girl3.1.jpg";
			},
			haha() {
				this.imgUrl="img/girl4.jpg";
			}
		}
	});
</script>

vue增删改查

<!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="" align="center">
						<h1 align="center">请添加学生</h1>
						姓名：<input type="text" id="" value="" v-model="name" />
						年龄：<input type="text" id="" value="" v-model="age" />
						<input type="button" id="" value="添加学生" @click="addObj()" />
					</div>
					<br>
					<br>
					<br>
					<table border="1" cellspacing="0" width="65%" align="center">
						<caption>
							<h1>学生信息表</h1>
						</caption>
						<tr>
							<th>编号</th>
							<th>姓名</th>
							<th>年龄</th>
							<th>操作</th>
						</tr>
						<tr v-for="(obj,index) in jsonArr" :key="index" align="center">
							<td>{{index+1}}</td>
							<td>{{obj.name}}--<a href="#" @click="changeName(index)">修改</a></td>
							<td>{{obj.age}}--<a href="#" @click="changeAge(index)">修改</a></td>
							<td><a href="#" @click="delItem(index)">删除</a></td>
						</tr>
						<tr align="center">
							<td colspan="4" v-if="jsonArr.length!=0"><button type="button" @click="clearAll()">{{mes}}</button></td>
							<td colspan="4" v-else>没有更多数据请你添加</td>
						</tr>
					</table>
				</div>
	</body>
</html>
<script type="text/javascript">
	new Vue({
		el: '#box',
		data: {
			name: '',
			age: '',
			jsonArr: [],
			mes:'全部删除'
		},
		methods: {
			delItem(index){
				if (window.confirm("确认要删除吗?")) {
						//alert(index);
						//数据一变化，视图就会更新。
						//splice() 删除元素，并向数组添加新元素。 
						this.jsonArr.splice(index, 1);
					}
				},
			
			addObj() {
				var name = this.name;
				var age = this.age;
				//非空判断
				if (!name || !age) {
					alert("用户名或年龄不能为空")
					return;
				}


				var obj = {
					"name": name,
					"age": age
				};
				//unshift() 向数组的开头添加一个或更多元素，并返回新的长度 
				this.jsonArr.push(obj);

				//添加完之后，把旧数据清空掉
				this.name = '';
				this.age = '';
			},
			clearAll() {
				if (window.confirm("确认全部删除吗?")) {
					this.jsonArr.splice(0);
					//this.jsonArr=[];
				}
			},
			changeName(index){
				
					this.jsonArr[index].name=prompt("请输入姓名");
				
			},
			changeAge(index){
				this.jsonArr[index].age=prompt("请输入年龄");
			}
		}
	})
	
	// 删除一个，修改姓名 修改年龄
	//当没有一条数据时，不显示全部删除按钮，而是显示没有更多数据请你添加，如果有了一条数据就显示全部删除。
</script>