聊一聊Vue学习之二

一、什么是Vue.js?

专注于为中小企业提供成都做网站、成都网站制作服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业红桥免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。上篇文章我们讲述了基础，可以戳这里：Vue的学习笔记(上篇)。这篇文章我们继续捋一捋~

二、Vue中使用样式class

第一种使用方式，传递一个数组，这里的class需要使用v-bind的数据绑定;

 
 
 
 

  
  
  
  
hello world1！ 
 
 
 
 

第二种使用方式，在数组中使用三元表达式;

 
 
 
 

  
  
  
  
hello world2！ 
 
 
 
 

第三种使用方式，在数组中使用对象来代替三元表达式，来提高代码的可读性;

 
 
 
 

  
  
  
  
hello world3！ 
 
 
 
 

在为class使用v-bind绑定对象时候，对象的属性是一个类名，由于对象的属性可以带引号，也可以不带，属性的值是一个标识符;

 
 
 
 

  
  
  
  
hello world！ 
 
 
 
 

在css的样式代码如下图：

在js的代码如下图：

效果图如下图：

三、Vue中样式style：vue中样式是动态绑定style,对象是不需要键值对的集合。

第一种使用方式是将键值对的对象写在data中，直接的动态绑定;

 
 
 
 

  
  
  
  
The first H!! 
 
 
 
 

第二种使用方式是多个键值对对象，使用数组方式，依次写入;

 
 
 
 

  
  
  
  
The first H1!! 
 
 
 
 

在js的代码如下图：

效果图如下图：

四、v-if和v-show的使用

v-if的特点：每次都会重新删除或创建元素，有较高的切换性能消耗。

v-show的特点：每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式，有较高的初始渲染消耗。

v-if和v-show的使用：

如果元素涉及到频繁的切换，最好不要使用 v-if, 而是使用 v-show，如果元素可能永远也不会被显示出来被用户看到，则使用v-if。

1.在html代码中，如以下的代码：

 
 
 
 

  
  
  
  
 
  
  
  
  
这是用v-if控制的元素 
  
  
  
  
这是用v-show控制的元素 
 
 
 
 

2.在data中定义一个flag，如以下的代码;

 
 
 
 

  
  
  
  
data(){ 
  
  
  
  
      return{ 
  
  
  
  
        flag: false, 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

3.效果图如下图：

五、总结

1.在vue中使用样式class，有三种方式传递一个数组、数组中的三元表达式、使用对象来代替三元表达式，在为class使用v-bind绑定对象，对象属性是一个类名，属性的值是一个标识符。

2.在vue中使用样式style，vue中样式动态绑定style,对象是不需要键值对的集合，有两种方式将键值对的对象写在data中直接的动态绑定、多个键值对对象，使用数组方式，依次写入。

3.vue-show本质是标签display设置为none，控制隐藏，vue-if是动态的向DOM树内添加或者删除DOM元素。

4.代码比较简单，希望对你有帮助!

本文转载自微信公众号「IT共享之家」，可以通过以下二维码关注。转载本文请联系IT共享之家公众号。

文章名称：聊一聊Vue学习之二
当前网址：http://www.shufengxianlan.com/qtweb/news30/17080.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联