vue.js 的绑定数据属性等。（还有循环缩写等等）-CSDN博客

<template>
  <div >
    <!--绑定数据-->
     <div v-bind:title="title">鼠标悬停</div>
    <br>
    <!--绑定链接路由地址-->
    <img v-bind:src="url" >
    <!--缩写绑定地址-->
    <img :src="url" >
    <!--绑定页面标签带文字-->
    <div v-html="h"></div>
    <!--绑定文本-->
    <div v-text="msg"></div>
    <!--绑定属性-->
    <div :class="{'red':flag}">
      我是一个div
    </div>
    <!--绑定属性，和属性的判断-->
    <div :class="{'red':flag,'blue':!flag}">
      我是一个div
    </div>
    <!--循环中判断并给到想要的标签属性-->
    <ul>
      <li v-for="(item,key) in list" :class="{'red':key==0}">
          {{key}}----{{item}}
      </li>
    </ul>
    <!--绑定属性并给属性赋予一个可变值-->
    <div class="box" v-bind:style="{'width':boxWdith+'px'}">
      啊啊 好一朵美丽地茉莉花
    </div>
  </div>

</template>

<script>
  export default{
    data() {
      return{
        // 数据
        msg:"你好VUE",
        // 文本
        title:'我是一个title',
        // 路由
        url:"//www.baidu.com/img/baidu_jgylogo3.gif",
        // 标签带文字
        h:"<h2>我是一个h2</h2>",
        // 判断值
        flag:false,
        // 数组,上面循环用
        list:['11111','2222','3333'],
        // 宽
        boxWdith:300
      }
    }
  }
</script>

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