zoukankan      html  css  js  c++  java
  • 04 Vue指令之v-bind绑定

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .active{
                color: red;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <a v-bind:href="res.url" v-bind:title="res.title">{{ res.name }}</a>
            <h3 v-bind:class="{active:isActive}">v-bind的用法</h3>
            <h4 :aaa = 'res.name'>bind</h4:aaa>
            <h4 :style="{color: isColor,fontSize:fontSize+'px'}">lizzy</h4>
        </div>
        <script src="vue.js"></script>
        <script>
            //v-bind 主要绑定属性或者自定义属性
            new Vue({
                el:'#app',
                data:{
                    res:{
                        name:'百度',
                        url:'https://www.baidu.com',
                        title:'百度一下'
                    },
                    isActive:true,
                    isColor:'green',
                    fontSize:30
                }
            })

        </script>
    </body>
    </html>
  • 相关阅读:
    [NOIP2013]华容道
    [随笔]冲NOIP一等奖。。
    [NOIP2015]联合权值
    [随笔]我回来啦!
    [考试]20151105
    [知识点]最近公共祖先LCA
    [BZOJ3751/NOIP2014]解方程
    [旧版][知识点]字符串Hash
    NOIP2016题解
    NOIP2016游记
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202547.html
Copyright © 2011-2022 走看看