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

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

绑定属性：

<template>
  
  <div id="app">
    <p v-bind:title="title">鼠标移上去看看p>
    
    <p :title="title">鼠标移上去看看p>
    <hr>
    <img v-bind:src="url" alt="">
    <hr>
    
    <div v-html="p">div>
    
    {{msg}}
  div>
template>

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

  }
}
</script>

运行效果如下：

绑定class与style：

<template>
  
  <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>

    
    <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>

运行效果如下：