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

水深无声 2024-02-18 23:19 11阅读 0赞

**主要操作技能：**

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

v-bind:src 绑定图片路径

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

v-bind:text 绑定文本

v-bind:class 绑定类样式

v-bind:style 动态绑定样式

**编写代码**

<template>
      <div id="app">
      	
      	
        <div v-bind:title="title">
                     鼠标移上去看看哦！
        </div><br />
        
         
         <div>
         	 <img v-bind:src="url" />
         </div><br />
         
          
         <img :src="url" /><br /><br />
         
          
          <div v-html="htmls"></div><br />
          
          
           
          {
       {msg}}  等同于   <span v-text="msg"></span><br />
          
          
          <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 />
    
          
          <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 />
          
       
           
           <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>

**效果：**

![70][]

![70 1][]

![70 2][]

[70]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/7301bdce352f41638f586344495fc048.png
[70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/3ae5f625f52843e8877db1aae65076e2.png
[70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/eda9da897c224fe78c062ab731c71bb6.png