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

所有代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>v-bind - 绑定页面中的元素属性</title><script src="js/vue.js" type="text/javascript" charset="utf-8"></script>

入坑摸鱼

4871人浏览 · 2017-11-02 18:07:18

入坑摸鱼 · 2017-11-02 18:07:18 发布

所有代码如下：

<!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>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^