Vue绑定属性绑定Class 绑定style

待我称王封你为后i 2022-03-25 09:36 382阅读 0赞

### vue是如何绑定属性和class以及style的 ###

下面我将会插入一段代码，本人在代码里做了相当详细的注释。

<template>
    
    
      <div id="app">
        <h3>{
       {msg}}</h3> 
        <br>
        <div v-bind:title="title">鼠标悬停试试看，冒号后面的title是固定语法，详情可见官方文档</div>
      
        <hr>
        <img src="./assets/M.jpg"/>
      
        <br>
        <br>
        
        <img v-bind:src="url"/>
        
        <br>
        <img :src='url'/>
        <br>
        <br>
    
        
        {
       {h}}
        
        <div v-html="h"></div>
        <br>
        <br>
    
        
        <div v-text="msg">
        </div>
        <br>
        <br>
    
    
        
        <div v-bind:class="{ 'red':flag}">  
        
          我是第一个div
        </div>
        <br>
        <br>
        <div :class="{ 'red':flag,'blue':!flag}"> 
          我是第二个div
        </div>
        <br>
        <br>
    
        
          <ul>
            <li v-for="(item,key) in list">
             {
       {key}}---{
       {item}}             
            </li>
          </ul>
            <br>
          <ul>
            <li v-for="(item,key) in list" :class="{ 'red':key==0,'blue':key==1}">
                                    
              {
       {key}}---{
       {item}}
            </li>
          </ul>
          <br>
          <br>
    
    
          
          <div class="box" v-bind:style="{ 'width':boxWdith+'px','height':boxHeight+'px'}">
          
          
          我是另一个div
        </div>
    
      </div>
    </template>
     
    <script> export default { // 表示将组件暴露出去 // name: 'App', 给组件起个名字，可以删除 data () { //业务逻辑里定义的数据 return { msg: '今天依然很好', // msg: "今天依然很好" 这里单引号和双引号是一样的结果 title:'这里是个标题', //url:require('./assets/M.jpg'), //在这里定义了url url:'./static/M.jpg', //此种路径问题也是一个重点问题，在此先不做讲解 h:'<h3>这里是一个h标签</h3>', //在逻辑层里写上HTML，需要在template绑定才可以正常显示 flag:true, list:['123','456','789'], boxWdith:500, boxHeight:500 } } } </script>
    
    <style> .red{ color: red; } .blue{ color:blue; } .box{ height: 100px; width: 100px; background: red; } </style>

最后的运行效果是这样的

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 3]每一幅图都是连在一起的，一共有三张图。关于src路径问题，我将会在下一篇文章里做详细讲解。  
这是自己在学习过程中所作的一个小总结，若有疑问或是不解请在下方评论，谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70]: /images/20220325/51cc165de366416ca3364b40dd0e2f39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 1]: /images/20220325/7a895b0c860c43e6aff15411e8cbe311.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 2]: /images/20220325/122aeaeed76b4f169d9465901aa1f105.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZeGlhb2JhbzA3MjY_size_16_color_FFFFFF_t_70 3]: /images/20220325/5e7e77f5dce34117a41fe587d5e21e3c.png