js 中原生php代码,Vue.js中原生指令的总结（代码）

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

目录：

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

1、v-text

给标签绑定需要显示的内容new Vue({

el: '#id',

template: `

data: {

val: '123'

}

})// 等同于 ： template: `

value:{{val}}

`

2、v-html

当绑定的值作为HTML的值显示，而不是字符串(类似于将innerText转为innerHtml)new Vue({ el: '#id',

template: `

data: {

val: '123'

}

})

3、v-show与v-if

接收一个boolean变量，判断该节点是否显示。

区别：

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

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

el: '#id',

template:

`

data: {

active: false,

text: 0

}

//

//

// })

4、v-for

对数组(或对象)进行循环new Vue({

el: '#id',

template:

`

// 遍历数组

{{item}}

// 遍历对象

{{key}} : {{val}}

data: {

arr: [1, 2, 3],

obj1: {

a: '123',

b: '456'

c: '789'

}

}

})

4、v-bind与v-on

v-bind：单向绑定数据

v-on：绑定事件// v-bind

// v-on

5、v-model

双向绑定数据new Vue({

el: '#id',

template:

`

data: { val: '111'

}

})

6、v-once

只绑定一次，当绑定的数据发生改变时，节点上的数据不会再改变new Vue({

el: '#id',

template:

`

Text: {{val}}

`,

data: {

val: '111'

}

})

相关推荐：