vue指令

vue常用指令

v-text

元素的innerText

1
2
3
<div v-text="text"></div>
-------------------------------
text:'helllo,大家好!',

v-html

元素的innerHTML

1
2
3
<div v-html="htmlText"></div>
-------------------------------
htmlText:'<h1>哈哈呵呵</h1>',

v-if

flase的时候,元素不会被插入,true就会插入元素,空串代表flase

1
2
3
<div v-if="vIf">我是v-if</div>
-------------------------------
vIf:true,

v-show

false给元素加上display: none

1
2
3
<div v-show="vShow">我是v-show</div>
-------------------------------
vShow:true

v-model

双向数据绑定(将元素的value值与内存中变量的属性值做绑定)

1
<input type="text" name="" v-model="num">

v-bind

单向数据绑定(js变量到页面的输出)

1
<input type="text" :name="text" :value="text">

class结合v-bind使用

1
2
3
4
5
<div v-bind:class="class1">方块1</div>
<div :class="class2">方块2</div>
-------------------------------
class1:'green',
class2:'red'

methods和v-on的使用

1
2
3
4
5
6
7
<button @click="change">大的变化</button>
-------------------------------
methods:{ //组件所提供的函数,
change(){
//事件
}
}

v-for的使用

1
2
3
4
5
6
<ul>
<!-- v-for="任意名 in 组件数据(数组)" :key="唯一标识" -->
<li v-for="(hero,index) in heros" :key="index">
{{hero.name}} {{hero.age}} {{index}}
</li>
</ul>