Vue 指令

最新推荐文章于 2022-11-10 10:29:03 发布

trainsun

最新推荐文章于 2022-11-10 10:29:03 发布

阅读量215

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/qq_36665450/article/details/99687554

版权

vue 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

Vue 指令

一、v-show

可以使用简单的条件表达式和 boolean 值
1、v-show=“a === b”
2、v-show=“false”
3、v-show=“true”
4、v-show=“a === 1 ? true : false”

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" v-show="a === 1 ? true : fasle">按钮</button>
		</div>
		<!-- 
			可以使用简单的条件表达式 和 boolean 值
			1、v-show="a === b"
			2、v-show="false"
			3、v-show="true"
			4、v-show="a === 1 ? true : false"
		 -->
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data:{
					isShow: false,
					a: 1,
					b: 1
				}
			})
		</script>
	</body>
</html>

二、v-if

v-if 和 v-show 区别：
前者是使用 display，后者是直接从 DOM 移除元素（数据量较大时，if 性能会好一点）

如果频繁切换，用 v-show（几十个几百个，超过上千个元素就不考虑用 v-show，会占用很多内存）
如果不频繁切换，用 v-if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<button type="button" v-if="a === 1">按钮1</button>
			<button type="button" v-else-if="a === 2">按钮2</button>
			<button type="button" v-else>按钮3</button>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data:{
					isShow: false,
					a: 1,
					b: 1
				}
			})
		</script>
	</body>
</html>

三、v-text & v-html

只有遇到变量中包含 html 字符串时才使用这两个指令：
1、v-text 将标签字符串按字符串显示
2、v-html 将标签字符串按标签显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 
				只有遇到变量中包含 html 字符串时才使用这两个指令：
				1、v-text 将标签字符串按字符串显示
				2、v-html 将标签字符串按标签显示
			 -->
			<h1 v-text="text">{{text}}</h1>
			<h1 v-html="text">{{text}}</h1>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					text: '<button>按钮</button>'
				}
			})
		</script>
	</body>
</html>

页面效果如下：

四、v-on

用来绑定事件监听器.

别名：“v-on: ”可以使用代替
v-on:click=“fasle”
v-on:click=“click()” 后者 v-on:click=“click”
内置的变量 $event 传递事件对象 --> v-on:click=“click(item,index,$event)”
从数组里同时取成员和下标 --> v-for="(item, index) in list"

注意：

data 的成员和 methods 里的成员不能重复.
splice 从数组里取成员,被取出的成员会从原数组里移除
数组成员不能直接通过下标去添加/删除成员,这样不会被模板响应

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-on指令</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-if="isShow">
				div 的内容.
			</div>
			<button type="button" v-on:click="isShow = !isShow">按钮1</button>
			<button type="button" @click="click">按钮2</button>
			<button type="button" v-on:click="run()">按钮3</button>
			<ul>
				<li v-for="(item,index) in list">
					{{item}}[{{index}}]
					<button type="button" v-on:click="click(item,index,$event)">删除</button>
					<button type="button" v-on:click="add(item,index,$event)">添加</button>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			// data 的成员和 methods 里的成员不能重复.
			const vm = new Vue({
				el: '#app',
				data: {
					isShow: false,
					list: [
						'按钮a',
						'按钮b',
						'按钮c'
					]
				},
				methods: { //添加事件的处理函数
					click(item, index, event) {
						// this.run()
						// this.isShow = !this.isShow
						// console.log(item,index,event)
						// splice 从数组里取成员,被取出的成员会从原数组里移除
						this.list.splice(index, 1)
						console.log(this.list)
					},
					add(item, index, event){
						this.list.push(item)
						// 数组成员不能直接通过下标去添加/删除成员,这样不会被模板响应
						// this.list[this.list.length] = '错误的操作方式'
					},
					run() {
						alert('访问run方法')
					}
				}
			})
		</script>
	</body>
</html>

五、v-for

循环指令.
1、循环对象 --> v-for="(item,index) in student"
index 是对象的 key
2、循环数组 --> v-for="(item, index) in list"
index 是数组的下标
3、循环数字 --> v-for="(i,index) in 20"
index 从 0 开始计数，i 从 1 开始打印
4、支持嵌套循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-for指令</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="item in list">
					<div>
						name: {{item.name}},
						age: {{item.age}},
					</div>
					<ul>
						<li v-for="child in item.children">
							<div>
								name: {{child.name}},
								age: {{child.age}}
							</div>
						</li>
					</ul>
				</li>
			</ul>
		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					student: {
						name: '张三',
						age: 18
					},
					list: [{
							name: '张三',
							age: 20,
							children: [{
									name: '小明',
									age: 3
								},
								{
									name: '小红',
									age: 5
								},
								{
									name: '小张',
									age: 4
								}
							]
						},
						{
							name: '李四',
							age: 22
						},
						{
							name: '王五',
							age: 25,
							children: [
								{
									name: '小何',
									age:6
								}
							]
						}
					]
				}
			})
		</script>
	</body>
</html>

输出结果为：

六、v-model 与双向绑定

v-model 一般用于表单元素“双向绑定”（two way binding）.
双向绑定，我可以提供数据给他，他也可以提供数据给我
input output = io
双向绑定 = io
单向绑定 = output

<div id="app">
	<p>{{name}}</p> // o
	<input type="text" v-model="name" /> //io
</div>

<script type="text/javascript">
	const vm = new Vue({
		el: '#app',
		data: {
			name: '张三'
		}
	})
</script>

七、v-bind

1、v-bind

v-bind 指令用于把某个属性绑定到对应的元素属性.

使用了 v-bind 指令的属性，它的值不再是字符串，而是变量

如下实例，实现通过滑动条控制背景色的透明度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-bind 指令</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<style type="text/css">
		#app {
			width: 100vw;
			height: 100vh;
		}
	</style>
	<body>
		<div id="app" v-bind:style="'background:rgba(0,0,0,' + range / 100 + ')'" >
			<input type="range" v-model="range" />{{range / 100}}
		</div>
    
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					range: 0
				}
			})
		</script>
	</body>
</html>

核心代码：v-bind:style="‘background:rgba(0,0,0,’ + range / 100 + ‘)’"

2、v-bind:class

v-bind:class，v-bind 的加强功能

v-bind:class="[]" 可以是数组:

作为数组时，里面的成员可以是对象，可以是字符串 [‘item’, {key1:true}, {key2:false}]
v-bind:class="{key: boolean}" 可以是对象，如果value 为 true，key就会被当做样式添加上.

如下实例，实现选项卡与选项内容的动态绑定效果：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<style type="text/css">
		.tab {
			width: 500px;
			height: 300px;
			border: 1px solid #000;
		}
		
		.tab .header {
			height: 40px;
			border-bottom: 1px solid #000;
			display: flex;
			align-items: center;
		}
		
		.tab .header .item {
			height: inherit;
			display: flex;
			align-items: center;
			cursor: pointer;
			padding: 0 5px;
			border-right: 1px solid #000;
		}
		
		.tab .header .item.active {
			background: #000;
			color: #fff;
		}
	</style>
	<body>
		<div id="app">
			<div class="tab">
				<div class="header">
					<div
						v-bind:class="['item',{
							active: showIndex === index
						}]"
						v-for="(item,index) in list"
						v-on:click="selectItem(index)"
					>
						{{item.title}}
					</div>
				</div>
				<div class="content">
					<div class="item"
               v-for="(item,index) in list"
               v-if="showIndex === index"
          >
						{{item.content}}
					</div>
				</div>
			</div>
		</div>
		
		<script type="text/javascript">
			const vm = new Vue({
				el: '#app',
				data: {
					showIndex: 0,
					list:[
						{
							title: '标题1',
							content: '内容1'
						},
						{
							title: '标题2',
							content: '内容2'
						},
						{
							title: '标题3',
							content: '内容3'
						},
						{
							title: '标题4',
							content: '内容4'
						}
					]
				},
				methods: {
					selectItem(i){
						this.showIndex = i
					}
				}
			})
		</script>
	</body>
</html>

效果图如下：

3、v-bind:style

CSS 属性名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

trainsun

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 指令

Vue 指令一、v-show可以使用简单的条件表达式和 boolean 值 1、v-show=“a === b” 2、v-show=“false” 3、v-show=“true” 4、v-show=“a === 1 ? true : false”<!DOCTYPE html><html> <head> <meta char...
复制链接

扫一扫