vue学习06--v-bind:class和v-bind:style

来源：互联网发布：四海认证淘宝渔具钓竿编辑：程序博客网时间：2024/05/19 05:38
所有代码如下：

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>v-bind - 绑定页面中的元素属性</title>        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>        <style type="text/css">            /*v-bind:class*/            .class0{color: greenyellow;}            .red{color: red;}            .yellow{color: yellow;}            .bold{font-size:24px;}            .class0{font-size: 24px;}            .class1{color: #008000;}            .arr1{font-size: 24px;}            .arr2{color: #008000;}            .err{font-size: 24px;}            .trueClass{color: #008000;}            /*v-bind:style*/        </style>    </head>    <body>        <div id="bindClass">            <h2>1、</h2>            <p v-bind:class="{class0:isTrue}">测试v-bind:class（默认应用样式：background:green）</p>            <button @click="changeIsTrue">去除上方p元素样式</button>            <br />            <a v-bind:href="Href">                <img v-bind:src="Src"/>            </a>            <h2>2、</h2>            <p v-bind:class="{red:isRed,yellow:isYellow}">样式覆盖问题(style中，样式在下方的覆盖上方的[黄色覆盖红色])</p>            <br />            <h2>3、</h2>            <p v-bind:class="{bold:isBold,red:isRed}">同时应用多个样式(24px，红色)</p>            <h2>4、</h2>            <p v-bind:class="classObject">直接应用样式对象数组</p>            <h2>5、数组语法</h2>            <p v-bind:class="[arr1C,arr2C]">数组语法</p>            <h2>6、三元表达式</h2>            <p v-bind:class="[errC,isT?trueC:'']">三元表达式</p>        </div>        <script type="text/javascript">            var x = 0;            var app = new Vue({                el:'#bindClass',                data:{                    Href:"http://www.baidu.com",                    Src:'img/star.png',                    isTrue:true,                    isRed:true,                    isYellow:true,                    isBold:true,                    classObject:{                        class0:true,                        class1:true                    },                    arr1C:'arr1',                    arr2C:'arr2',                    errC:'err',                    isT:true,                    trueC:'trueClass'                },                methods:{                    changeIsTrue:function(){                        this.isTrue=false;                    }                }            })        </script>        <div id="bindStyle">            <h2>7、bind-style（直接绑定）</h2>            <p v-bind:style="{color:colorS,fontSize:fontSizeX+'px'}">bind-style</p>            <h2>8、bind-style（样式对象）</h2>            <p v-bind:style="styleX">bind-style</p>            <h2>9、bind-style（样式对象数组）</h2>            <p v-bind:style="[styleXX,styleXY]">bind-style数组</p>            <h2>10、v-bind:指令</h2>            <p v-bind:title="mag">bind-style数组</p>        </div>        <script type="text/javascript">            var bindStyle = new Vue({                el:"#bindStyle",                data:{                    colorS:"red",                    fontSizeX:24,                    styleX:{                        color:"red",                        fontSize:"24px"                    },                    styleXX:{                        color:"red",                        fontSize:"24px"                    },                    styleXY:{                        background:"yellow"                    }                }            })        </script>        <div id="bindTitle">            <h1 v-bind:title="title" v-bind:data-ti="myTitle">title提示为：{{title}},我的自定义标题为:{{myTitle}}</h1>        </div>        <script type="text/javascript">            new Vue({                el:"#bindTitle",                data:{                    title:"这是title标题",                    myTitle:"这是我的自定义属性"                }            })        </script>    </body></html>
阅读全文
0 0