黑马程序员技术交流社区

标题: 【郑州校区】前端笔记Vue项目 第一天 四 [打印本页]

---

作者: 我是楠楠    时间: 2020-3-18 09:28
标题: 【郑州校区】前端笔记Vue项目 第一天 四

【郑州校区】前端笔记Vue项目 第一天 四

绑定对象

• 我们可以给v-bind:class 一个对象，以动态地切换class。

• 注意：v-bind:class指令可以与普通的class特性共存

  
  

[mw_shl_code=applescript,true]1、 v-bind 中支持绑定一个对象
    如果绑定的是一个对象 则 键为 对应的类名  值 为对应data中的数据
<!--
    HTML最终渲染为 <ul class="box textColor textSize"></ul>
    注意：
        textColor，textSize  对应的渲染到页面上的CSS类名
        isColor，isSize  对应vue data中的数据  如果为true 则对应的类名 渲染到页面上


        当 isColor 和 isSize 变化时，class列表将相应的更新，
        例如，将isSize改成false，
        class列表将变为 <ul class="box textColor"></ul>
-->

<ul class="box" v-bind:class="{textColor:isColor, textSize:isSize}">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
  <div v-bind:style="{color:activeColor,fontSize:activeSize}">对象语法</div>

<sript>
var vm= new Vue({
    el:'.box',
    data:{
        isColor:true,
        isSize:true，
        activeColor:"red",
        activeSize:"25px",
    }
})
</sript>
<style>

    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>[/mw_shl_code]

• 绑定class
  

[mw_shl_code=applescript,true]2、  v-bind 中支持绑定一个数组    数组中classA和 classB 对应为data中的数据

这里的classA  对用data 中的  classA
这里的classB  对用data 中的  classB
<ul class="box" :class="[classA, classB]">
    <li>学习Vue</li>
    <li>学习Node</li>
    <li>学习React</li>
</ul>
<script>
var vm= new Vue({
    el:'.box',
    data:{
        classA:‘textColor‘,
        classB:‘textSize‘
    }
})
</script>
<style>
    .box{
        border:1px dashed #f0f;
    }
    .textColor{
        color:#f00;
        background-color:#eef;
    }
    .textSize{
        font-size:30px;
        font-weight:bold;
    }
</style>[/mw_shl_code]

绑定对象和绑定数组 的区别

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据

• 绑定数组的时候数组里面存的是data 中的数据

  
  

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2