第二章 VUE数据绑定和渲染（2）

上一节中，我们对简单的数据进行绑定。这一节中我们将学习vue 条件语句

我们先看第一个简单的条件语法DEMO1, 这里判断 isRed 和 isBlue真假，来控制 a 标签是否显示 style样式 red,blue,如果 有一个条件为真，则class 就显示对应的样式。如 isRed为true, 样式styel red就会显示出来，同理isBlue为true,样式blue也会渲染出来，反之，则样式不渲染。

<template>
  <div class="hello">
    <a :class="{'red':isRed , 'blue' : isBlue }">测试v-if</a>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isBlue: true,
      isRed : true
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.red{
  color:red;
}
.blue{
  color:blue;
}
</style>

我们再看vue给我们提供的另个语法 v-if /else ,在实际项目开发中，我们一般会根据条件来动态控制显示html中的某个代码片段。

<template>
  <div class="hello">
    <div v-if="count > 10">
        这里显示count大于10 的DIV
    </div>
    <div v-else-if="count == 10">
        这里显示count等于10 的DIV
    </div>
    <div v-else="count < 10">
      这里显示count小于10 的DIV
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 10
    }
  }
}
</script>