vue指令练习

最新推荐文章于 2022-12-09 16:43:17 发布
最新推荐文章于 2022-12-09 16:43:17 发布
阅读量295 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jinqianwang/article/details/82780885
版权

shopcar 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
</head>
<body>
	<script type="text/javascript" src="js/vue.js"></script>
	<div id="box">
		<table border=1>
			<tr>
				<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</td>
				<td>商品名称</td>
				<td>商品单价</td>
				<td>商品数量</td>
				<td>操作</td>
			</tr>
			<tr v-for="(item,index) in arr">
				<td>{{index+1}}</td>
				<td v-model="item.name">{{item.name}}</td>
				<td v-model="item.price">{{item.price}}</td>
				<td><button @click="jian(index)">-</button><span v-model="item.sold">{{item.sold}}</span><button @click="jia(index)">+</button></td>
				<td><button @click="dele(index)">移除</button></td>
			</tr>
		</table>
		<span>总计：￥{{sum()}}</span>
	</div>
	
	<script>
		var vm = new Vue({
			el:'#box',
			data:{
				total:0,
				arr:[{id:1,name:"iPhoneX",price:7999,sold:1},
				{id:2,name:"荣耀 10",price:2399,sold:1},
				{id:3,name:"华为P20",price:3399,sold:1},
				{id:4,name:"小米 8",price:3399,sold:1}]
			},
			methods:{
				jian:function(index){
					if (this.arr[index].sold>0) {
						this.arr[index].sold-=1;
					}
				},
				jia:function(index){
					this.arr[index].sold+=1;
				},
				sum:function(){
					let sum = 0;
					this.arr.forEach(function(item){
						sum += item.price*item.sold;
					});
					return sum;
				},
				dele:function(index){
					this.arr.splice(index,1);
				}
			}
		})
	</script>
</body>
</html>

学生注册 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>index</title>
	<style>
		.span1{
			color:red;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="js/vue.js"></script>
	<div id="box">
		<h3>学生信息录入系统</h3>
		<div>
			<span>姓名：</span>
			<input type="text" v-model="name1" @blur="name_blur" placeholder="请输入名字">
			<span v-show="name1err" class="span1">4到16位(字母，数字，下划线)</span>
		</div>
		<div>
			<span>年龄：</span>
			<input type="text" v-model="age" @blur="age_blur">
			<span v-show="ageerr" class="span1">年龄在0~100之间</span>
		</div>
		<div>
			<span>性别：</span>
			<select v-model="sex">
				<option value="男" >男</option>
				<option value="女" >女</option>
			</select>
		</div>
		<div>
			<span>手机：</span>
			<input type="text" @blur="phone_blur" v-model="phone" placeholder="请输入手机号">
			<span v-show="phoneerr" class="span1">手机号必须为11位</span>
		</div>
		<div>
			<button @click="addStudent">创建新用户</button>
		</div>

		<br/>
		<br/>
		<div id="box2">
			<table border=1>
				<tr>
					<td>姓名</td>
					<td>性别</td>
					<td>年龄</td>
					<td>手机</td>
					<td>删除</td>
				</tr>
				<tr v-for="(item,index) in arr">
					<td>{{item.name}}</td>
					<td>{{item.sex}}</td>
					<td>{{item.age}}</td>
					<td>{{item.phone}}</td>
					<td><button @click="dele(index)">删除</button></td>
				</tr>
			</table>
		</div>
	</div>

	<script>
		var vm = new Vue({
			el:'#box',
			data:{
				name1err:false,
				ageerr:false,
				phoneerr:false,
				name1:'',
				sex:"男",
				age:22,
				phone:'',
				arr:[{id:0,name:'方君昊',sex:'男',age:20,phone:"15473124380"},
				{id:0,name:'乔向雁',sex:'女',age:22,phone:"15373124380"},
				{id:0,name:'鲁傲柔',sex:'男',age:23,phone:"15273124380"},
				{id:0,name:'寸琴韵',sex:'女',age:21,phone:"15173124380"}],
			},
			methods:{
				addStudent:function(){
					if(this.name1==""||this.sex==""||this.age==0||this.phone==""||this.name1err==true||this.ageerr==true||this.phoneerr==true){
						alert("注册不允许有空值！");
					}else{
					this.arr.push({id:0,name:this.name1,sex:this.sex,age:this.age,phone:this.phone});
					}
				},
				name_blur:function(){
					if (this.name1.length>16||this.name1.length<4) {
						this.name1err=true;
					}else{
						this.name1err=false;
					}
				},
				age_blur:function(){
					if (this.age>0&&this.age<130) {
						this.ageerr=false;
					}else{
						this.ageerr=true;
					}
				},
				phone_blur:function(){
					if (this.phone.length==11) {
						this.phoneerr=false;
					}else{
						this.phoneerr=true;
					}
				},
				dele:function(index){
					this.arr.splice(index,1);
				}
			}
		})
	</script>
</body>
</html>

TODOList

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>INDEX</title>
	<style>
		ul{
			list-style: none;
		}
		.span{
			color:skyblue;
		}
		.finsh{
			color:#ccc;
			text-decoration: line-through;
		}
	</style>
</head>
<body>
	<script type="text/javascript" src="js/vue.js"></script>
	<div id="box">
	<h1>任务标题</h1>
	<p>任务数{{arr.length}}，未完成{{choose2()}}<span class="span" @click="dele">【完成】</span></p>
	<ul>
		<li v-for="(item,index) in arr" v-bind:class="{finsh:item.bol}">
			<div v-if="item.falg">
			<input type="checkbox" v-model="item.bol"/>
			<span @click="jiaodain(index)">{{item.des}}</span>
			</div>

			<input v-else type="text" v-model="item.des" @blur="shiqujiaodian(index)"/>
			
		</li>
	</ul>
	<input type="text" v-model="msg"><button @click="add">添加</button>
	</div>

	<script>
		var vm = new Vue({
			el:"#box",
			data:{
				msg:"",
				arr:[{des:'jin',bol:false,falg:true},
				{des:'qian',bol:false,falg:true},
				{des:'wang',bol:false,falg:true}],
				flag:false,
			},
			methods:{
				choose2:function(){
					let num =0;
					this.arr.forEach(function(item){
						if (!item.bol) {
							num++;
						}
					})
					return num;
				},
				add:function(){
					this.arr.push({des:this.msg,bol:false,falg:true});
					this.msg="";
				},
				jiaodain:function(index){
					this.arr[index].falg=!this.arr[index].falg;
				},
				shiqujiaodian:function(index){
					this.arr[index].falg=!this.arr[index].falg;
				},
				dele:function(){
					let dele = [];
					for(let i=0;i<this.arr.length;i++){
						if (this.arr[i].bol) {
							dele.push(i);
						}
					};
					for(let i=dele.length-1;i>=0;i--){
						console.log(dele[i])
						this.arr.splice(dele[i],1);
					}
				}


			}
		})
	</script>

	
</body>
</html>

 

jinqianwang
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue作业
qq_27009517的博客
06-26 626
li点哪个，哪个变色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
Vue的类名点击切换练习-深刻理解v-for中index的应用
yuan_xiaoxin的博客
11-25 933
Vue的类名点击切换-深刻理解v-for中index的应用以及v-bind的动态绑定属性不跟它做过多的憋憋!!!上代码!!! 不跟它做过多的憋憋!!!上代码!!! <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
练习 | vue12个指令600次练习
A123ppleQueen的博客
01-12 167
v-on---1
Vue中的v-for和v-bind结合使用小习题
xiaoxi_hahaha的博客
05-24 2066
需求： 当你打开网页后，出现某个列表，默认情况下，列表中的第一项为红色，此后，当用户点击其中的任何一个列表项之后，此列表项变成红色，其它的列表项为黑色。 vue代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .active{ color:r
vue习题
热门推荐
qq_45179355的博客
06-03 1万+
一 单选题，每道小题1分，共9道小题，9分1. 下面选项中，可以用来创建store实例对象的是（）。A new Vuex.Store({})B new Vue({})C new Vuex({})D new Store({})2. 以下代码 {{this.$store.state.name}}var store = new Vuex.Store({ state:{name:'store'}})var vm = new Vue({...
Vue中常用的指令 学习 源代码
09-05
本资源为Vue基础框架及指令学习的源...可配合vue常用指令及用法总结进行相应练习： 学习网址https://blog.csdn.net/weixin_46474921/article/details/126673338 指令内容及源代码都是一致同步的，便于大家学习vue技术！
vue.js的入门练习案例
01-02
【Vue】二、 认识Vue.js的各种指令 【Vue】三、Vue.js的常用选项 【Vue】四、了解Promise 【Vue】五、Vue.js之Axios 【Vue】六、Vue.js路由vue-router 【Vue】七、Vue-cli工程化开发 【Vue】八、Vuex状态管理 。。...
练习代码1-模板语法&内置指令
最新发布
12-19
练习代码1-模板语法&内置指令
前端vue框架 高频面试题
08-11
官方文档涵盖了Vue.js的基本概念、语法、指令、组件等方面的知识，并提供了丰富的示例和实践指导。同时，官方文档还包含了Vue.js生态系统中其他相关工具和库的介绍，如Vuex（状态管理）、Vue Router（路由管理）等。...
vue学习教程及demo
09-17
VUE学习PPT及自己练习的demo,包含实例和生命周期/常用指令/属性和方法/过度及动画/组件/路由 vue-devtools.zip
一个练习用的vue网站
08-10
技术 vue2.0 vuex sass es6 vue-router2.0
按照vue1的官方教程练习的几十个demo
08-12
按照vue1的官方教程练习的几十个demo。
vue知乎项目vue练习
06-06
适合初步学习vue的技术里面有代码包括路由ajax还有vuex
Vue基础指令练习
marvintian518的博客
12-09 265
基础指令练习项目
v-bind/v-on/v-for结合练习
407指导员
12-09 172
v-bind/v-on/v-for结合练习 鼠标点哪个电影其变为红色，默认第一个红色 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作业</title> <style> .Red { color: red; } </style> </head> <body&g
vue基础指令练习
m0_64895976的博客
04-07 776
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do.
VUE初学--列表渲染v-for
qq_42970981的博客
11-19 754
列表渲染 v-for v-for 指令基于一个数组来渲染一个列表，需要用 v-for = " item in itemList " 或者 v-for = " item of itemList " 形式特殊的语法，itemList 是元数据素组， item 是被迭代的数组元素的 别名 注：我们可以用 of 替代 in 作为分隔符，它更接近 JavaScript 迭代器的语法 <div id...
Vue教程04：v-for指令
Lee Chen的博客
12-05 949
v-for循环数组、对象 代码参考：/lesson04/01. v-for指令.html 使用v-for=&quot;(item, index) in items&quot;就可以将数组或对象中的数据循环输出。 JavaScript： let vm = new Vue({ el: '#app', // 根元素或挂载点。 data: { users: [ { name: 'lee', p...
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
HushPlot的博客
11-04 723
Vue常用指令的练习、Vue中的计算属性以及表单元素与双向数据绑定v-model、axios模块的使用和get传参
初学vue案例练习题
08-23
初学Vue的案例练习题可以从以下几个方面进行练习： 1. 组件的基本使用：创建一个Vue组件，在模板中展示一些静态文本或数据，并在组件中定义一些基本的数据和方法。 2. 数据绑定：练习使用v-model指令和数据绑定来...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值