zoukankan      html  css  js  c++  java
  • v-bind的动态绑定

    v-bind Vue的指令 动态绑定为属性赋值
      语法: v-bind:属性(参数)=" 变量值"
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="../js/vue.js"></script>
        <style>
            .red {
                color: blue;
            }
            .font {
                font-size: 40px;
            }
        </style>
    </head>
    <body>
        <div v-html="rawHtml" id="app" v-bind:class="{red:isRed,font:isFont}"></div>
        <div id="app1" v-bind:style="{color:color,fontSize:fontSize}">listen and point</div>
        <script>
            var vm = new Vue({
                el: "#app",
                data: {
                    rawHtml: "<span>hello world111</span>",
                    isRed:true,
                    isFont:true,
                }
            });
            var vm1 = new Vue({
                el: "#app1",
                data: {
                    color: "red",
                    fontSize: '50px',
                }
            });
        </script>
    </body>
    </html>
  • 相关阅读:
    URAL 1948 H
    int、long、long long取值范围
    Bonetrousle HackerRank 数学 + 思维题
    湖南省第十二届大学生计算机程序设计竞赛 problem A 2016
    Abbreviation ---- hackerrank
    POJ 3321 Apple Tree DFS序 + 树状数组
    HDU
    PICO CTF 2013 PHP 2: 85
    XSS进阶三
    XSS进阶二
  • 原文地址:https://www.cnblogs.com/kukai/p/12382340.html
Copyright © 2011-2022 走看看