Vue-4-属性

作者: 压根儿没快乐过 | 来源:发表于2017-12-24 21:59 被阅读0次
    <!DOCTYPE html>
    <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="UTF-8">
        <title>属性</title>
        <script src="../js/vue.js"></script>
        <style>
            .red{
                color: red;
            }
            .black{
                background: black;
            }
            .myred{
                color:green;
            }
        </style>
    </head>
    <body>
    
    <div id="box">
        <img v-bind:src="url" alt="">
        <!--简写-->
        <img :src="url" alt="" :width="w">
        <hr>
        <!--css 第一种使用方法-->
        <strong :class="[red,blue]">文字1...</strong>
        <!--css 第二种使用方法-->
        <strong :class="{myred:true}">文字2...</strong>
        <strong :class="{myred:false}">文字3...</strong>
        <strong :class="{myred:false,black:true}">文字3...</strong>
        <strong :class="{myred:false,black:a}">文字3...</strong>
        <hr>
        <!--style-->
        <strong :style="[x,y]">文字4...</strong>
        <strong :style="b">文字4...</strong>
    </div>
    
    
    
    
    <script>
        window.onload = function () {
            //属性
            new Vue({
                el:'#box',
                data:{
                    url:'https://www.baidu.com/img/bd_logo1.png',
                    w:"100px",
                    red:"red",
                    blue:"black",
                    a:true,
                    x:{color:"red"},
                    y:{backgroundColor:"black"},
                    b:{color:"red",
                        backgroundColor:"black"
                    }
                },
                methods:{
                }
            });
        };
    </script>
    
    </body>
    </html>
    

    相关文章

      网友评论

        本文标题:Vue-4-属性

        本文链接:https://www.haomeiwen.com/subject/iofkgxtx.html