Vue.js框架--v-bind绑定title ，src， html，text，class，style（三）

主要操作技能：

    v-bind:title  鼠标移上的显示

    v-bind:src  绑定图片路径

    v-bind:html 绑定HTML文本和标签

    v-bind:text 绑定文本

    v-bind:class 绑定类样式

    v-bind:style  动态绑定样式

编写代码

<template>
  <div id="app">
  	
  	<!--鼠标移上 v-bind:title -->
    <div v-bind:title="title">
                 鼠标移上去看看哦！
    </div><br />
    
     <!--图片1 v-bind:src-->
     <div>
     	 <img v-bind:src="url" />
     </div><br />
     
      <!--图片2 属性:src-->
     <img :src="url" /><br /><br />
     
      <!--
                  绑定HTML标签输出
      -->
      <div v-html="htmls"></div><br />
      
      <!-- 绑定数据另一个方法-->
       
      {{msg}}  等同于&nbsp;  <span v-text="msg"></span><br />
      
      <!--v-bind:class类样式-->
      <div v-bind:class="{'my':flag}">this is test v-bind class</div><br />
      
      
      <div v-bind:class="{'my':flag,'your':!flag}">this is test v-bind class</div><br />

      <!--直接用属性:class类样式-->
      <div :class="{'my':!flag}">this is test v-bind class</div><br /><br />
     
      <!-- 循环数据-->
      <ul>
      	<li v-for="it in list">
      		{{it}}
      	</li>
      </ul>
      
      <br />
      
      <!-- 循环数据使用样式-->
      <ul>
      	<li v-for="(it,key) in list" :class="{'my':key==0,'your':key==1}">
      		{{key}}==>{{it}}
      	</li>
      </ul><br />
      
   
       <!--v-bind:style style使用动态改变宽样式 ,必须加px哦！-->
       <div class="box" v-bind:style="{width:boxWdith+'px'}">
       	 盒子
       </div>
      
      
      
      
      
     
     
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      title:'我是一个标题哦！',
//    url:'https://goss4.vcg.com/creative/vcg/material/400/VCG211161017213.jpg',
      url:'https://goss2.vcg.com/creative/vcg/material/400/VCG211161017209.jpg',
      htmls:'<h3>helloworld</h3>',
      flag:false,
      list:['aaa','bbb','ccc','ddd'],
      boxWdith:400 //宽度
      
    }
  }
}
</script>

<style lang="scss">
   .my{
   	 color:darkgoldenrod;
   	 font-weight: bolder;
   }
   
   .your{
   	color:blue;
   	font-size: 15px;
   }
   
   .box{
   	width: 100px;
   	height: 100px;
   	background: coral;
   }
</style>

效果：