Vue插值指令2

最新推荐文章于 2024-02-01 17:54:39 发布

m0_44974944

最新推荐文章于 2024-02-01 17:54:39 发布

阅读量86

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/m0_44974944/article/details/108781427

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Vue插值指令2

1.v-bind 语法糖: :

可动态绑定事件元素属性，例如图片src、链接、title、:style样式。

绑定图片src、链接。

<body>
    <div id="app">
        <!-- :是语法糖简写，使用v-bind获取src属性 -->
        <img :src="imgUrl" alt="">
        <a :href="aUrl">百度一下</a>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
               imgUrl:"../image/2.jpg",
               aUrl:"http://baidu.com",
            },
        })
    </script>
</body>

在这里插入图片描述
2. 绑定:style样式。

<body>
    <div id="app">
        <!-- 要加双引号，因为如果不加会当成一个变量去解析 -->
        <h2 :style="{fontSize:'50px',backgroundColor:'red'}">{{message}}</h2>
        <h2 :style="getStyle()">{{message}}</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                message:'海燕！',
                fsize:50,
                bcolor:'red',
            },
            methods:{
                getStyle:function(){
                    return {fontSize:this.fsize+'px',backgroundColor:this.bcolor}
                },
            }
        })
    </script>
</body>

在这里插入图片描述

动态绑定一些类class样式。

  <body>
      <div id="app">
          <!--  <h2 :class="{类名1:true,类名2:boolean}">{{message}}</h2> -->
          <h2 :class="{active:isActive,line:isLine}">
              {{message}}
          </h2>
          <!-- 太长可以放到函数中 -->
          <h2 :class="getClass()">
              {{message}}
          </h2>
          <button @click="btn">点击</button>
      </div>
      <script src="../js/vue.js"></script>
      <script>
          let app = new Vue({
              el:"#app",
              data:{
                  message:'海燕！',
                  //赋值方便修改状态
                  isActive:true,
                  isLine:true,
              },
              methods:{
                  btn:function(){
                      //点击取反状态
                      this.isActive = !this.isActive;
                  },
                  getClass:function(){
                      return {active:this.isActive,line:this.isLine}
                  },
              },
          })
      </script>
  </body>

在这里插入图片描述

2.v-for

数值经常和v-for使用，最后会根据数据生成列表。

<body>
    <div id="app">
           <ul>
               <!-- 遍历数组 -->
               <li v-for="(it,index) in arr">
                   {{index}}--你好呀-->{{it}}
               </li>
           </ul>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 3.创建Vue实例 -->
    <script>
        var app = new Vue({
            el:"#app",
            data:{
               arr:["北京","上海","杭州","深圳","广州"],
            }
        })
    </script>
 </body>

在这里插入图片描述

3.v-bind、v-on与v-for结合使用

<style>
    .active{
        color:pink;
    }
</style>
<body>
    <div id="app">
        <ul>
            <!-- 使用v-for遍历数组   使用v-bind绑定class类  使用v-on获取点击事件 -->
            <li v-for="(arr,index) in movies" :class="isShow(index)" @click="getClass(index)">{{index}}--->{{arr}}</li>
        </ul>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#app",
            data:{
                movies:['好吃','贪睡','磨叽','脱发'],
                current:0,
                isActive:true,
            },
            methods:{
                getClass:function(index){
                    console.log(index);
                    // 点击时让current变为点击的索引
                    this.current = index;
                },
                isShow:function(index){
                    //如果current和点击的索引相同，则返回true
                    if(index === this.current)
                        return {active:this.isActive}
                },
            },
        })
    </script>
</body>

在这里插入图片描述