vue学习笔记-绑定属性 绑定class及style（2）

vue学习之绑定属性 绑定class及style

绑定属性：

<template>
  <!-- v-bind:属性 简写 :属性-->
  <div id="app">
    <p v-bind:title="title">鼠标移上去看看</p>
    <!-- v-bind:属性 简写 :属性-->
    <p :title="title">鼠标移上去看看</p>
    <hr>
    <img v-bind:src="url" alt="">
    <hr>
    <!-- 绑定html -->
    <div v-html="p"></div>
    <!-- 绑定文本text -->
    {{msg}}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg:'我是绑定的text',
      title:'我是绑定的title属性',
      url:'src/assets/logo.png',
      p:'<p>我是一个p标签</p>'
    }
  },
  methods:{

  }
}
</script>

运行效果如下：

绑定class与style：

<template>
  <!-- v-bind:属性 简写 :属性-->
  <div id="app">
    <div v-bind:class="{'red':flag}">中华人民共和国</div>
    <div :class="{'red':!flag, 'blue':flag}">富强明主和谐</div>

    <ul>
      <!-- 多个用,隔开 -->
    	<li v-for="(item,index) in list" :key="index" :class="{'red':index==0,'blue':index==1}">
        {{item}}
      </li>
    </ul>

    <!-- 绑定style -->
    <div v-bind:style="{color: activeColor,fontSize: fontSize + 'px'}">迎接祖国70华诞</div>

    <!-- 接绑定到一个样式对象通常更好，这会让模板更清晰 -->
    <div v-bind:style="styleObject">中华人民共和国万岁</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return{
      flag : true,
      list : ['新闻1','新闻2','新闻3'],
      activeColor : 'red',
      fontSize : 30,
      styleObject: {
          color: 'red',
          fontSize: '20px'
        }
    }
  },
  methods:{

  }
}
</script>

<style lang="scss">
  .red{
    color: red;
  }
  .blue{
    color: blue;
  }
</style>

运行效果如下：