vue中常用的v-指令

vue中常用的v-指令演示

常用指令
v-text 设置双标签元素的innerText
v-html 设置双标签元素的innerHTML
v-if 插入或者移除元素(true,插入,false移除)
v-else 保证上方兄弟节点存在v-if || v-else-if
- v-if v-else 只会有其一存在
v-show 隐藏或者显示元素
v-model 双向数据绑定
- 元素必须有value值, DOM元素的value 与js内存变量的属性进行绑定

class结合v-bind使用

变化的属性可以以v-bind的赋变化的值
v-bind:属性名=“表达式||对象”
简写方式 :属性名=“表达式||对象”
- 设置一个样式三元表达式
- 设置多个样式对象的形式
  - 对象 {样式名:是否使用bool,样式名:是否使用}

methods和v-on的使用

options:
- methods 是一个对象,key是函数名，value是函数体
v-on:DOM原生事件=“表达式||函数”
- 如果调用函数没有参数，()可以省略
简写方式: @事件名=“表达式||函数”

v-for的使用

v-for=“xxxx in items” :key=“index”
总结
- 数组v-for="(ele,index) in dataArr " :key=“index”
- 对象v-for="(value,key,index) in dataObj" :key=“index”

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.app{
			width: 500px;
			margin: 50px auto;
			background: #ccc;
			text-align: center;
		}
		.red{
			color: red;
		}
		.border{
			border: 1px solid blue;
		}
		input{
			text-align: center;
		}
		ul{
			padding: 0;
		}
		li{
			list-style: none;
			border: 1px solid blue;
		}
	</style>
</head>
<body>
	<div class="app">
		<h5> {{msg}} </h5>
		<input type="text" v-model='msg'>
		<h5 :class='{red:isTrue}'> {{msg}} </h5>
		<button @click='change'>点击改变</button>
		<h5 v-if = 'isTrue' v-text = 'msg'></h5>
		<h5 v-show = 'isTrue' v-html = 'msg'></h5>
		<ul v-show = '!isTrue'>
			<li v-for='(item,index) in arr' v-text = 'item'></li>
		</ul>
	</div>
	<script type="text/javascript" src="lib/vue-2.4.0.js"></script>
	<script type="text/javascript">
		let vm = new Vue({
			el:'.app',
			data:{
				msg:'<h1>hello world</h1>',
				isTrue:false,
				arr:['a','b','c','d']
			},
			methods:{
				change(){
					this.isTrue = !this.isTrue;
				}
			}
		})
	</script>
</body>
</html>

vue中常用的v-指令

猜你喜欢