第4课:v-bind以及class与style的绑定

1.写出本课中v-bind的作用,并分别写出v-bind的变量语法,数组语法,对象语法

作用:v-bind通常用来绑定属性的,动态地绑定一些 class 类名或 style 样式,格式是v-bind:属性名 = "值",简写:属性名 = "值"

变量语法:v-bind:class = "变量",变量形式 ,这里的变量的值,通常是在css定义好的类名;

数组语法:v-bind:class= "[变量1,变量2]" ,数组形式,其实跟上面差不多,只不过可以同时绑定多个class名;

对象语法:v-bind:class = {classname1:boolean,classname2:boolean},对象形式,这里的classname1(2)其实就是样式表中的类名,这里的boolean通常是一个变量,也可以是常量、计算属性等,这种方法也是绑定class最常用的方式。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>yufa</title>
</head>
<body>
  <div id="wrap">
    <p>变量语法</p>
    <div :class="ccc">我的class是class3</div>

    <p>对象语法</p>
    <div :class="{active:isActive}">我的class是active</div>

    <p>数组语法</p>
    <div :class='[aaa, bbb]'>我的class是class1和class2</div>

  </div>


  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
  <script>
    var app = new Vue({
      el:'#wrap',
      data:{
        isActive: true,
        aaa: 'class1',
        bbb: 'class2',
        ccc: 'class3'
      }
    })
  </script>

</body>
</html>

效果

2.使用v-bind对象语法来动态绑定一个class,使用对象语法

效果
代码

3.使用v-bind数组语法来动态绑定一个class,使用数组语法

效果
代码

4.v-bind绑定style属性

http://js.jirengu.com/fiwoqoveda/2/edit
http://js.jirengu.com/fiwoqoveda

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,931评论 19 139
  • 爱你爱到不怕死,是我一位朋友的连载故事系列,写看到的和听到的爱情故事,读来仿佛观众生态,令人感慨唏嘘。我也不由地想...
    山女画眉鸟阅读 1,414评论 0 1
  • “ 走,跑步去”,不知从何时起,这几乎成了我和同事之间打招呼的常用语了。 同事们一听到我这句话,就知道我们又要去跑...
    西瓜甜甜啦阅读 3,682评论 6 15
  • 第一次翻转式讲授建构主义课程没想到效果出乎意料的好大家给了极高的评价当然自己也感觉良好 虽然浩睿咨询是专门做培训和...
    承谦阅读 3,169评论 1 1

友情链接更多精彩内容