本篇文章给大家带来的内容是关于Vue.js中原生指令的总结（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

  目录：

  v-text v-html v-show/v-if v-for v-bind/v-on v-model v-once

  1、v-text

  给标签绑定需要显示的内容

  <pre class="brush:js;toolbar:false;">new Vue({

el: '#id',
template: `<p v-text="&#39;value:&#39;+val">

`,

data: {
    val: '123'
}

})// 等同于 ： template: `  value:{{val}}
`</pre></p>
  2、v-html

  当绑定的值作为HTML的值显示，而不是字符串(类似于将innerText转为innerHtml)

  <pre class="brush:js;toolbar:false;">new Vue({ el: '#id',

template: `<p v-html="val">

`,

data: {
    val: '123'
}

})</pre></p>
  3、v-show与v-if

  接收一个boolean变量js原生代码，判断该节点是否显示。

  区别：

  v-show:即在节点上加上一个display:none

  v-if:判断该节点是否存在,false时节点不存在,会引起DOM节点重绘

  <pre class="brush:js;toolbar:false;">new Vue({

el: '#id',
template:
 `<p>
     
     

`,

data: {
    active: false,
    text: 0 
}
//  
//  
//  })</pre></p>

  4、v-for

  对数组(或对象)进行循环

  <pre class="brush:js;toolbar:false;">new Vue({

el: '#id',
template: 
`<p>
        
            // 遍历数组                
            {{item}}
        
        
            // 遍历对象                
            {{key}} : {{val}}
        
 

`,

data: {
    arr: [1, 2, 3],
    obj1: {
        a: '123',
        b: '456'
        c: '789'
}

}
})</pre></p>
  4、v-bind与v-on

  v-bind：单向绑定数据

  v-on：绑定事件

  <pre class="brush:js;toolbar:false;">// v-bind<p v-bind:class="val">
// 简写方式:  
// 其中val是data中的数据
// v-on  
// 简写方式:  
// 其中clickButn是methods中的方法</pre></p>
  5、v-model

  双向绑定数据

  <pre class="brush:js;toolbar:false;">new Vue({

el: '#id',
template: 
`<p>
    

`,

data: {        val: '111'
}

})</pre></p>
  6、v-once

  只绑定一次js原生代码，当绑定的数据发生改变时，节点上的数据不会再改变

  <pre class="brush:js;toolbar:false;">new Vue({

el: '#id',
template: 
`<p v-once >Text: {{val}}

`,

data: {
    val: '111'
}

})</pre></p>