Vue中的常用的内置指令

目录

1.v-bind

2.v-show

3.v-if

4.v-for

5.v-on

6.v-modle

---

1.v-bind

v-bind 是vue 中， 提供的用于绑定属性的指令”。绑定标签的属性，如src，title等，元素的属性在标签的内部。完整写法为v-bind:属性名。简写方式为：“：”

<template>
	<view class="content">
		<h2>图片</h2>
		<img v-bind:title="imgTitle">
		<br>
		<input type="button" value="修改状态" @click="changeTitle">
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgTitle: "图片标题",
				isActive: true

			}
		},
		onLoad() {

		},
		methods: {
		changeTitle:function(){
			this.imgTitle = "test"
		}

		},
	}
}
</script>

2.v-show

与v-if的效果相同，不同的是，v-show是给元素加上display：none，而v-if是直接将节点在DOM上删除。所以需要频繁切换的时候用v-show。

3.v-if

v-if指令的作用是：根据表达式的真假（true，false）切换元素的显示状态。

<view class="" @click="check">点击切换显示</view>
		<view v-if="isShow">显示1</view>
		<view v-else>显示2</view>

4.v-for

 v-for 指令基于一个数组来渲染一个列表。 v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组或者对象，而 item 则是被迭代的数组元素的别名 在 v-for 的时候，建议设置 key 值，并且保证每个 key 值是独一无二的。

代码：

<view class="content">
		<view>
			<view v-for="(stu,index) in stuArray">
				<view>{{"姓名:"+stu.name+",年龄:"+stu.age+",序号:"+index}}</view>
				<view>
					擅长技能:
					<block v-for="sk in stu.skills">
						{{sk}},
					</block>
				</view>
			</view>
		</view>
	</view>

data() {
			return {
				stuArray: [{
						name: "张三",
						age: 12,
						skills: ["Java", "C#", "Python"]
					},
					{
						name: "李四",
						age: 13,
						skills: ["Sing", "Dance", "Rap", "Basketball"]
					},
					{
						name: "王五",
						age: 14,
						skills: ["Piano", "Guitar", "Trumpet"]
					}
				]

			}
		},

5.v-on

用于绑定HTML事件，简写：“@”，其中的click是点击事件。

<view class="">
			<button @click="Jump">点击跳转</button>
		</view>

6.v-modle

v-model是Vue用于表单元素上创建双向数据绑定。

也是需要给一些输入的 功能 进行一下双向绑定 比如说input、textarea

<input v-model="name" @input="inputName" type="text" placeholder="请输入你的姓名"  style="background: skyblue;"  />
​
name:'我叫强哥'