vue :class 动态绑定样式_0基础入门Vue(02.基础用法)-CSDN博客

前端inn

公众号ID：前端inn

关注

作者：阿良

编辑：煜喵喵不爱喝酒

上次我们学习了关于Vue的一些基本指令和用法，相信你对Vue已经有了一些了解。本节阿良给大家讲解Vue的基础用法之组件封装、组件传参、动态绑定style和class。

在我们开发网站的时候，网站一般都会有一些共同的部分，比如导航栏、搜索框、版权信息等。

单纯的HTML是没有include这个功能的，如果使用nginx，对一些新手又不太友好。

当然，你可以在每个页面都复制一遍这些内容，或者使用iframe标签去引入共同的html文件，但是这样并不是最优解。

而Vue则可以帮我们简单实现这个功能。

具体是如何实现该功能的呢？重点重点！???

我们可以使用Vue将这些共同的内容封装成一个一个的小组件，在需要的地方直接引入组件就可以了。

(是不是超级简单)

现在让我们上手实践一下

    Vue.component('module-one', {      template: '这是一个组件'  })  var app = new Vue(...)

此时显示的内容为

· 这是一个组件

现在我们已经学会了封装组件，但是这并不足以应付我们的日常开发。

下面我们来学习给组件传参???

v-for="item in dataList" v-bind:data="item" v-bind:key="item.text" >

 Vue.component('module-one', { props: ['data'], template: '{{ data.text }}' })  var app = new Vue({    el:"#app",    data:{     dataList: [        { text: '数据1' },        { text: '数据2' }, { text: '数据3' } ]    }  })

此时，我们的组件就接收到了传来的参数。

当我们需要对一段数据进行处理再展示的时候，我们需要在标签内部的{{data.xxxxxxxx}}进行一系列操作，这无疑为代码增加了负担。这个时候，计算属性出现了(computed)。

当然，过滤器也可以使用，我们之后会讲解过滤器，目前暂时不谈。

举个“?”

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

 var vm = new Vue({ el: '#app', data: { message: 'Hello' },  computed: {    reversedMessage: function () { return this.message.split('').reverse().join('') } }})

此时，计算属性已经帮我们解决了运算。只有当data中的message发生变化的时候，计算属性中的reversedMessage才会发生变化。

当需要在数据变化时执行异步或开销较大的操作时，计算属性就不是很够用了，这个时候，我们可以使用侦听器watch。

大家可以自己看一下侦听器，我们下次再讲。(阿良会结合内容多寡安排讲解)

最后，给大家介绍一下如何动态绑定style和class?

动态绑定style和class，可以用对象语法，也可以用数组语法

以下是绑定class的“?”

//对象语法//根据isActive的值(true/false)//来判断active这个class选择器的效果是否生效//多个class可用逗号隔开//可用单引号写一些非动态内容//--------------------------------------------------//数组语法data: {  activeClass: 'active',  errorClass: 'text-danger'}//可以把已有的class样式赋值给变量//以数组的形式绑定在class属性中//在其中，也可以使用一些三目运算符，解决一下常用的需求

以下是绑定style的“?”

data: {  activeColor: 'red',  fontSize: 30}//这里我们更建议将内容封装在一个对象中，使代码可读性更强data: {  styleObject: {    color: 'red',    fontSize: '13px'  }}//数组用法，与class用法一致

今天的内容就到此结束了，有疑问记得在下方留言哦！