Vue.js学习（3）-页面数据渲染及绑定（属性，class,html,style）

1.vue循环渲染数据及v-for循环实现 v-for

<br> 在html中代表插入换行符

<hr> 在html中代表一条水平线

<template>
  <div id="app">
  <h2>你好---{{msg}}</h2>
    <br>
    <h2>{{obj.name}}</h2>
    <br>
    <hr>
    <ul>
      <li v-for="item in list">
        {{item}}
      </li>
    </ul>
    <br>
    <hr>
    <ul>
      <li v-for="item in list1">
        {{item.title}}
      </li>
    </ul>
    <br>
    <hr>
    <ul>
      <li v-for="item in list2">
        {{item.cate}}
        <ol>
          <li v-for="news in item.list">
            {{news.title}}
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to sunny Vue',//基础数据源
      obj:{//对象数据源
        name:"孙悟空"
      },
      list:["1","2","3"],//数组数据源
      list1:[//对象数组数据源
        {title:"111"},
        {title:"222"},
        {title:"333"}
        ],
      list2:[//复杂数组数据源
        {"cate":"国内新闻",
        "list":[
          {"title":"国内新闻01"},
          {"title":"国内新闻02",}
        ]},
        {"cate":"国际新闻",
          "list":[
            {"title":"国际新闻01"},
            {"title":"国际新闻02",}
          ]}
      ]
    }
  }
}
</script>

<style lang="scss">
</style>

2.属性绑定 v-bing:title

<template>
  <div id="app">
  <h2>你好---{{msg}}</h2>
    <br>
    <hr>
    <div v-bind:title = "title">请用鼠标看我</div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to sunny Vue',//基础数据源
      title:"我是一个属性绑定测试文本",

    }
  }
}
</script>

<style lang="scss">
</style>

3.html绑定 v-html

<template>
  <div id="app">
  <h2>你好---{{msg}}</h2>
    <br>
    <hr>
    <div v-html="h2"></div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      h2:"<h2>我是一个h2</h2>"
    }
  }
}
</script>

<style lang="scss">
</style>

4.class绑定 v-bind:class

实现list数组的第一行高亮显示

<template>
  <div id="app">
  <h2>你好---{{msg}}</h2>
    <br>
    <hr>
    <div v-html="h2"></div>

      <ul v-for="(item,key) in list" v-bind:class="{'red':key==0}">
        {{item}}
      </ul>


  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      h2:"<h2>我是一个h2</h2>",
      list:["100","200","300"],
      flag:true,
    }
  }
}
</script>

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

 

5.style绑定 v-bind:style

<template>
  <div id="app">
  <h2>你好---{{msg}}</h2>
    <br>
    <hr>
    <div v-html="h2"></div>

      <ul v-for="(item,key) in list" v-bind:class="{'red':key==0}">
        {{item}}
      </ul>

 <div class="box" v-bind:style="{width:boxwidth + 'px'}"></div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      h2:"<h2>我是一个h2</h2>",
      list:["100","200","300"],
      boxwidth:300
    }
  }
}
</script>

<style lang="scss">
  .red{
   color: red;
  }
  .blue{
    color: blueviolet;
  }
  .box{
    height: 100px;
    width: 100px;
    background: blueviolet;
  }
</style>