Vue简单指令
2019-03-11 本文已影响0人
莫以有
1.v-bind 用于属性绑定
<div id="app">
<div v-bind:id="message">文字</div>
</div>
<script>
new Vue({
el: '#app',
data: {
massage: 'hello world'
}
})
</script>
- 该结果为 hello world
2.v-model 用于双向绑定
<div id= "app">
<input type="text" v-model="name" placeholder="请输入" />
<h2>你好,{{name}}</h2>
</div>
<script type= "text/javascript">
var app =new Vue({
el:'#app',
data:{
name:'',
}
})
</script>
3.v-if
<a v-if="ok">yes</a>
- 如果属性值ok为true,则显示。否则,不会渲染这个元素
4.v-else
<a v-if="ok">yes</a>
<a v-else>No</a>
- v-else是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。