zoukankan      html  css  js  c++  java
  • Vue:v-bind指令

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .active{
                text-decoration: none;
                color: #00a1d6;
            }
        </style>
    </head>
    <body>
    <div id="app">
        <a v-bind:class="{active: isActive}" v-bind:href="url">Click
            <!--<img v-bind:src="img" alt="">-->
        </a>
    
    </div>
    
    <script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                url:"http://baidu.com",
    //            img:"https://dummyimage.com/100x100/ffcc00/ffffff"
                isActive:true
            }
        })
    </script>
    </body>
    </html>
    v-vind:class="{active: isActive}"
    键为为标签增添的类,当isAcive为true时,为标签添加active类
    v-bind:属性, 可以简写为:属性
  • 相关阅读:
    过河卒 题解
    You Are the One solution
    D
    Find a way solution
    A
    入门训练 Fibonacci数列
    求平均成绩 题解
    海选女主角 题解
    子集生成和组合问题
    log4j
  • 原文地址:https://www.cnblogs.com/c491873412/p/7419818.html
Copyright © 2011-2022 走看看