Vue.js常用指令和常用属性

最新推荐文章于 2024-07-30 08:46:21 发布

Hamlet01

最新推荐文章于 2024-07-30 08:46:21 发布

阅读量287

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Hamlet01/article/details/107819829

版权

一个简单的思维导图

一、常用指令

注：指令和属性会有穿插
1.v-for指令、el属性、data属性
v-for是一个循环结构，和Java的for循环结构类似；el用于挂载要管理的元素/获取Vue实例关联的DOM元素；data用于储存Vue实例的数据对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
		<script src="../js/vue.min.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in movies">{{item}}</li>
			</ul>
		</div>
	</body>
	<script>
		const app = new Vue({
			el:'#app',
			data:{
				movies:["泰坦呢克号","海蒂和爷爷","活着","功夫"]
			}
		})
	</script>
</html>

效果图
2.v-on指令、methods属性
v-on用来绑定事件,绑定点击事件就会和methods属性一起用；methods属性里面放置方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="../js/vue.js"></script>
	<script src="../js/vue.min.js"></script>
	<body>
		<div id="app">
			<h3>当前计数：{{count}}</h3>
			<button v-on:click="add(4)">加</button>  
			<button @click="subtract">减</button>
		</div>
	</body>
	<script>
		//声明vue对象
		const app = new Vue({
			el:'#app',
			data:{
				count:0
			},
			methods:{
				add:function(num){
					this.count+=num;
					
				},
				subtract:function(){
					this.count--;
					
				}
			}
		});
	</script>
</html>

效果图

二、常用属性

computed属性：计算，具有缓存特性；v-bind：用来绑定class和style的；v-else：用来给v-if/v-show指令添加一个else块

 注：v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="../css/car.css" type="text/css" />
	</head>

	<script src="../js/vue.js"></script>
	<script src="../js/vue.min.js"></script>
	<body>
		<div id="app">
			<div v-if="boolist.length>0">
			<table border="1" cellpadding="0" cellspacing="0">
				<th colspan="7">购物车</th>
				<tr>
					<td>序号</td>
					<td>图片</td>
					<td>书名</td>
					<td>进货日期</td>
					<td>价格</td>
					<td>数量</td>
				</tr>
				<tr v-for="(books,i) in boolist">
					<td>{{books.id}}</td>
					<td>
						<img :src="books.image"/>
					</td>
					<td>{{books.name}}</td>
					<td>{{books.data}}</td>
					<td>￥{{books.price}}</td>
					<td><button @click="sub(i)">-&nbsp;</button>
						{{books.count}}
						<button @click="add(i)"> + </button>
					</td>
					<td>
						<button style="padding: 10px 30px; background: #c8b5c8;" @click="isDelete(i)">移除</button>
					</td>
				</tr>
			</table>
			<p>商品总价格为：{{countNum}}</p>
		</div>
		<div v-else>
			<p style="color: aqua;">已经没有商品了哦</p>
		</div>
		</div>
	</body>
	<script src="../js/shoopingCart.js"></script>
</html>

JS代码：

let boolist = [{
		id: 1,
		image: "../picture/IMG_20200313_150544.jpg",
		name: 'Vue.js实战',
		data: '2015-11-19',
		price: 35,
		count: 1
	},
	{
		id: 2,
		image: "../picture/IMG_20200313_150544.jpg",
		name: 'Vue.js实战',
		data: '2014-03-21',
		price: 45,
		count: 1
	},
	{
		id: 3,
		image: "../picture/IMG_20200313_150544.jpg",
		name: 'Vue.js实战',
		data: '2012-05-03',
		price: 85,
		count: 1
	},
	{
		id: 4,
		image: "../picture/IMG_20200313_150544.jpg",
		name: 'Vue.js实战',
		data: '2016-01-01',
		price: 73,
		count: 1
	},
	{
		id: 5,
		image: "../picture/IMG_20200313_150544.jpg",
		name: 'Vue.js实战',
		data: '2017-08-15',
		price: 15,
		count: 1
	}
]
const app = new Vue({
	el: '#app',
	data: {
		boolist,
		isChangeSize: false
	},
	methods: {
		isDelete: function(i) {
			this.boolist.splice(i, 1);
		},

		enter: function(i) {
			this.isChangeSize = true;
		},

		leave: function(i) {
			this.isChangeSize = false;
		},

		add: function(i) {
			this.boolist[i].count++;
		},

		sub: function(i) {
			if (this.boolist[i].count <= 1) {
				return;
			} else {
				this.boolist[i].count--;
			}

		}
	},
	computed: {
		countNum: function() {
			let sum = 0;
			for (let i = 0; i < this.boolist.length; i++) {
				sum += this.boolist[i].count * this.boolist[i].price;
			}
			return sum;
		}
	}
})

CSS代码：

table{
	border:1px solid #e9e9e9;
	border-collapse: collapse;
    border-spacing: 0;
}

th,td{
	padding: 8px 16px;
	border: 1px solid #e9e9e9;
	text-align: left;
}

th{
	text-align: center;
	background-color: #f7f7f7;
	color:#5c6b77;
	font-weight: 600;
}
button {
    background-color: #ffff7f; /* Green */
    border: none;
    color: black;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

img{
	width: 50px;
	
}

img:hover{
	width: 100px;
}