成都网站建设设计

将想法与焦点和您一起共享

Vue中常用指令v-if,v-for,v-show,v-else,v-bind,v-on有什么用

这篇文章给大家分享的是有关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:

 
  

Hello, Vue.js!

  Yes!   No!   = 18">Age: {{ age }}   = 0">Name: {{ name }}  
 var app= new Vue({   el: '#app',   data: {   yes: true,   no: false,   age: 20,   name: 'lililili'   }  })

        //数据的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}}
// 数据 var data = { title: '哈哈哈', type: '科技' } var app = new Vue({ el: '#app', data: data })

2:v-for指令

v-for指令基于一个数组渲染一个列表,它和JavaScript的遍历语法相似:

v-for="item in items"

items是一个数组,item是当前被遍历的数组元素。

Eg:


{{item}}

/var data = [
'快乐大本营',
'奔跑吧兄弟',
'极限挑战'
]
var app = new Vue({
el: '#app',
data: {
list: data
}
})

与v-if一样v-for也可以应用在template元素上,此时可以实现对多组元素的for循环

Eg:



  • {{item.type}} |  {{item.title}}

  • var data = [ { type: '湖南', title: '快乐大本营' }, { type: '浙江', title: '奔跑吧兄弟' }, { type: '东方', title: '极限挑战' } ] var app = new Vue({ el: '#app', data: { list: data } })

    3:v-show指令

    v-show也是条件渲染指令,控制元素显隐,和v-if指令不同的是,使用v-show指令的元素始终会被渲染到HTML,它只是简单地为元素设置CSS的style属性。

    V-if是false会将元素在dom文档中删除

    V-show是false是将元素的display设置none

    V-if会删除元素,v-show只是做样式显隐,会保留页面中

    4:v-else指令

    可以用v-else指令为v-if或v-show添加一个“else块”。v-else元素必须立即跟在v-if或v-show元素的后面——否则它不能被识别。

    v-else元素是否渲染在HTML中,取决于前面使用的是v-if还是v-show指令。

    v-if为true,后面的v-else不会渲染到HTML;v-show为tue,但是后面的v-else渲染到HTML。

    5:v-bind指令

    v-bind指令可以在其名称后面带一个参数,中间放一个冒号隔开,这个参数通常是HTML元素的特性(attribute),例如:v-bind:class=”''

    v-bind:argument="expression"

    6:v-on指令

    v-on指令用于给监听DOM事件,它的用语法和v-bind是类似的,例如监听元素的点击事件:

    语法:V-on:click=“事件回调函数的名称”

    定义事件的回调函数,在vue的实例化对象的methods属性中定义

    Methods他的值是一个对象

    对象是属性名称表示事件的回调函数名称

    对象的属性值是一个函数,就是事件的回调函数

    他的this指向的是vue实例化对象,因此通过它我们可以获取或者设置vue实例化对象上属性

    它默认有个参数是事件对象,这个事件对象可以访问该事件的相关信息$event传递参数可以访问到事件对象

    当我们在使用事件时候,可以传递一些参数,此时在vue的事件回调函数中它的参数与事件使用时候传入的参数是一致的

    
    btn
    btn2
    

    {{title}}

    var app = new Vue({ el: '#app', data: { title: '', msg: '' }, methods: { // 属性名称表示回调函数的名称 showTitle: function () { // console.log(this) // console.log(arguments) 传的参数都能访问到 msg, $event, 'hello' // 通过this访问vue实例化对象上的其他属性和方法。Data.title data.aa this.title = '快乐大本营'; }, aa: function () { } } })

    感谢各位的阅读!关于“Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!


    文章标题:Vue中常用指令v-if,v-for,v-show,v-else,v-bind,v-on有什么用
    转载源于:
    http://chengdu.cdxwcx.cn/article/josgss.html

    其他资讯