vue.js的常用指令
1、v-html 、v-text
标签内绑定内容,v-html可以显示含有标签的
2、v-model
一般用在表达输入,很轻松的实现表单控件和数据的双向绑定
3、v-show
他跟元素的显示和隐藏有关系,v-show指令取值为true/false,分别对应着显示/隐藏
4、v-if 、v-else-if、v-else
<div id="app-3"v-bind:title='tit'>
<p v-if="seen">现在你看到我了if</p>
<p v-else-if="seen2">现在你看到我了elseif</p>
<p v-else>现在你看到我了else</p>
</div>
script:
var app3 = new Vue({
el: '#app-3',
data: {
seen: false,
seen2:true,
tit:'标题信息'
}
})
5.v-on : 绑定事件
v-on : click 可以简写为@click,@绑定一个事件。
6.v-once 只渲染一次
<div id="app-7">
<input type="text" v-model='mg'/>
<p v-once>{{mg}}</p>
</div>
<script>
var app7 = new Vue({
el: '#app-7',
data: {
mg: 'hello vue!'
}
})
7.v-bind: 绑定属性
可以直接简写为 : 这样的方式然后绑定动态属性比较常见的有a标签的href,img标签的src。
8.v-for
把数组的值展现到视图上
<div id="app-4">
<ul>
<li v-for="(todo,index) in todos">
{{ index+':'+todo.text }}
</li>
</ul>
</div>
<script>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: '学习 JavaScript'},
{text: '学习 Vue'},
{text: '整个牛项目'}
]
}
})