Vue.js常用指令(v-if、v-for等)汇总 )

有时候指令太多会造成内存错误，内存混合的问题。因此，本文将采用穿插记忆和交叉引用的方式来避免错误。

本文主要谈六点说明：

v-if//v-show//v-else//v-for//v-bind//v-on

1.v-if条件渲染指令，根据后续表达式的bool值判断是否渲染该元素；

eg:

HTML:

div id='example01' p v-if='男'男/p p v-if='女'女/p p v-if='年龄25 '年龄： { { age } }/p p p v-if=' name . indexof(' Lin ')0 ' name : { { name } }/p/div js 3360

varvm=new vue({ El : ' # example 01 '，data: {male3360 true，female3360 false，age:29，name:' Colin'})页面呈现效果：

因此，v-if指令只呈现其后面表达式为真的元素；这里引入了v-show指令，因为两者的区别在于v-show指令会渲染后面带有false表达式的元素，并且会给这样的元素添加css代码：style=' display:none将上述v-if示例代码改为v-show，页面呈现效果如下：

2.v-show类似于v-if，只是它呈现了后面带有false表达式的元素，并向这样的元素添加了css代码：style=' display:none

3.v-else必须遵循v-if/v-show指令，否则将不起作用；

如果v-if/v-show指令的表达式为真，则不显示else元素；如果v-if/v-show指令的表达式为false，则在页面上显示else元素；

eg:

div id=' app ' h1 v-if=' age=25 ' age : { { age } }/h1 h1 v-elsename : { { name } }/h1 HR h1 v-show=' name . indexof(' cool ')=0 ' name : { { name } }/h1 h1 v-elsesex 3360 { { sex } }/h1/div script var VM=new Vue({ El : ' # app '，data:

eg:

CSS:

styletable，th，tr，td { border:1px solid # ffcccc边界崩溃：崩溃；}/styleHTML:

div id='example03 '表格和tr th name/th Thage/th ThSex/th/tr/d t body tr v-for=' person in people ' TD { { person . name } }/TD { { person . age } }/TD { { person . sex } }/TD/tr/t body/table/div js :

script var VM=new Vue({ El : ' # example 03 '，data : { people :[{ name : ' Jack '，age: 30，sex : ' maly ' }，{ name: 'Bill '，Age: 26，sex : ' maly ' }，{ name: ' Tracy '，age: 22，sex 3: ' maly ' }，script

5.指令v-bind用于响应性地更新HTML特性，例如绑定类元素或其样式。

例如，在分页功能中突出显示当前页数的效果，可以使用bind指令。

ul class=' pagining ' Li v-for=' n in page count ' a href=' javascripit : void(0)' v-bind : class=' active number===n 1？active ' : ' ' { { n ^ 1 } }/a/Li/ul6，v-on用于监视指定元素的DOM事件，如单击事件。

eg:

div id='example04 '输入类型='text' v-model='message '按钮v-: click=' greet ' greet/button！-v-on指令可以缩写为@ symbol-button @ click=' greet '再次问候/button/div脚本var范例data04={message3360 '很高兴见到你' }；var vm2=new Vue({ El : ' # example 04 '，data:exampleData04，methods : { greet : function(){ alert(this . message)；} } })/脚本本文已整理成《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请点击专题vue.js组件学习教程学习。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。