vue.js的常用指令

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: '整个牛项目'}
            ]
        }
    })