Vue2 基本指令

Vue基本指令

1. 动态修改html和字符串中包含标签中直接渲染

v-html=""  

2. 控制显示隐藏,布尔值

v-if=""  //元素创建与删除
		//紧跟v-if使用
		v-else-if=""
		v-else

v-show="" //改变display

3. 注册事件

v-on:事件名=”内联语句或methods内的函数名“  //函数无参可不写()
简写： @事件名="内联语句或methods内的函数名" 
如 @click="getId" //点击触发getId函数

4. 动态设置标签属性 如：src、url等

v-bind:属性名=“表达式”
简写:   :属性名=“表达式
拓展：对样式控制的增强
	class
		//场景：一个类来回切换，如tab栏切换
		:class="{ 类名: 布尔值, ... }" //控制是否使用这个类
		//场景：批量添加
		:class="['类名', ...]" //在原有的基础上添加类
	
	style
		:style="{ 属性名：'值', ...}"
		//注：属性名带-的可以用引号把属性名引起了，或者用小驼峰命名法来使用 
		//如 background-color  可以写成 background-color或backgroundColor

5. 数据循环

v-for="(item, index) in 数组" //遍历数组、对象、数字等
:key="index" //添加唯一标识   注: 当没添加时删除某一项会删除最后一项，然后把内容向上重新复用，可能会导致一些样式等问题没有改变
//如
<p v-for="(item, index) in 数组" :key="item.id">{{ item }}</p>

6. 表单双向数据绑定

v-model=""

<!--单选框要配合name和value使用 v-modex获取的值时value-->
<input type="radio" v-model="sex" name="sex" value="1">男
<input type="radio" v-model="sex" name="sex" value="2">女

<!--多选框 select的v-model是对应option的value的-->
<select v-model=“id”>
    <option value="11">北京</option>    
</select>

//v-model的原理  模板（行内）中获取事件的形参 用$event获取
先让输入框的数据绑定 :value="msg" 
然后监听input对事件的值进行更改 @input="msg = $event.target.value"