码迷,mamicode.com
首页 > 其他好文 > 详细

vue2.* 绑定属性 绑定Class 绑定style 03

时间:2018-08-29 14:20:21      阅读:98      评论:0      收藏:0      [点我收藏+]

标签:你好   html   vue   return   default   span   bind   key   世界   

<template>
  <div id="app">
    <!-- 绑定属性 -->
    <div v-bind:title="title">你好,世界</div>
    <!-- 绑定class -->
    <div :class="{‘red‘:flag,‘blue‘:!flag}">你好,世界</div>
    <!-- 绑定style -->
    <div class="box" :style="{width:boxwidth+‘px‘}"></div>
    <!-- 绑定HTML -->
    <div v-html="h"></div>
    <!-- 绑定数据2 -->
    <div v-text="msg"></div>
    <!-- 循环数据,第一个高亮 -->
    <ul>
        <li v-for="(item,key) in list" :class="{‘blue‘:key%2==0,‘red‘:key%2!=0}">
            {{key}}---{{item}}
        </li>
    </ul>
       
  </div>
</template>

<script>
export default {
  data () {
    /*业务逻辑里面定义的数据*/
    return {
        title:你好,世界,
        h:<h2>h2</h2>,
        msg:你好vue,
        list:[1,2,3],
        flag:true,
        boxwidth:300
    }
  }
}
</script>

<style>
    .red{color:red}
    .blue{color:blue}
    .box{
        height:100px;
        width:100px;
        background:red
    }
</style>

 

vue2.* 绑定属性 绑定Class 绑定style 03

标签:你好   html   vue   return   default   span   bind   key   世界   

原文地址:https://www.cnblogs.com/zsczsc/p/9553032.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!