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>
  • 相关阅读:
    线程私有数据
    C
    Zend_Json 简介 --(手冊)
    Spring之AOP实现面向切面编程
    JDBC框架
    NYOJ15-括号匹配(二)-区间DP
    SDUTOJ 贪心 -商人小鑫
    Java 8 类型转换及改进
    java内存结构(执行时数据区域)
    Android Studio 编译Gradle提示编码错误
  • 原文地址:https://www.cnblogs.com/wuhui1222/p/14202547.html
Copyright © 2011-2022 走看看