这篇文章给大家分享的是有关Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联专注于中大型企业的网站设计、网站建设和网站改版、网站营销服务,追求商业策划与数据分析、创意艺术与技术开发的融合,累计客户成百上千,服务满意度达97%。帮助广大客户顺利对接上互联网浪潮,准确优选出符合自己需要的互联网运用,我们将一直专注成都品牌网站建设和互联网程序开发,在前进的路上,与客户一起成长!
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
Vue.js提供了一些常用的内置指令,如下:
v-if指令
v-for指令
v-show指令
v-else指令
v-bind指令
v-on指令
1:v-if指令
v-if指令是条件渲染指令,它根据表达式的真假来删除和插入元素,它的基本语法如下:
v-if="expression"
expression是一个返回布尔值的表达式,表达式可以是一个布尔值属性,也可以是一个返回布尔值的运算式。
Eg:
var app= new Vue({ el: '#app', data: { yes: true, no: false, age: 20, name: 'lililili' } })Hello, Vue.js!
Yes!
No!
= 18">Age: {{ age }}
= 0">Name: {{ name }}
//数据的yes属性为true,所以"Yes!"会被输出;
//数据的no属性为false,所以"No!"不会被输出;
//运算式age >= 18返回true,所以"Age: 28"会被输出;
//运算式name.indexOf('li') >= 0返回false,所以"Name: lililili"会被输出。
V-if只能控制一个元素上的是否显隐,对于多个元素控制我们可以使用一个template元素实现
在vue中我们想使用条件模板直接在dom元素上使用v-if指令,v-if指令的值表示vue实例对象上的数据值
Tempalte是vue提供的一个自定义元素,写在这个里面的 元素会根据template v-if属性来控制显隐,在渲染以后这个元素会被vue删除掉,(v-if指令元素保留)
{{type}} | {{title}}