Vueclass与style绑定

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson07

一 用对象的方法绑定class

很简单,举个栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="{‘class1‘:name1,‘class2‘:name2}">我是文字</div> <!--法一:用对象的方式实现-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    name1: true,
                    name2: false,
                }
            })
        </script>
    </body>
</html>

最后实现效果

关于使用对象绑定class,还可以用另外一种写法:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="test" :class="classObj">我是文字</div> <!--法一:用对象的方式实现-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    classObj: {
                        name1: false,
                        name2: true
                    }
                }
            })
        </script>
    </body>
</html>

最后的实现效果是:

二 用数组的方法绑定class

很简单,举个栗子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,class2]">我是文字</div> <!--法二:用数组的方式实现-->
        </div>

        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: ‘name1‘,
                    class2: ‘name2‘,
                }
            })
        </script>
    </body>
</html>

实现效果:

其实在数组中还可以用判断是否显示这个类名,举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,isShow? class2:‘‘]">我是文字</div> <!--法二:用数组的方式实现-->
        </div>

        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: ‘name1‘,
                    class2: ‘name2‘,
                    isShow: false
                }
            })
        </script>
    </body>
</html>

实现效果是:

三  用数组和对象混合的方法绑定class

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :class="[class1,{class2: isShow}]">我是文字</div> <!--法二:用数组的方式实现-->
        </div>

        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    class1: ‘name1‘,
                    class2: ‘name2‘,
                    isShow: true
                }
            })
        </script>
    </body>
</html>

实现的效果:

四 用对象的方式实现style绑定

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="{color: yanse,width: kuan + ‘px‘ }">我是文字</div> <!--法一:用对象的方式实现-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    yanse: ‘red‘,
                    kuan: 100,
                }
            })
        </script>
    </body>
</html>

实现效果如下:

其实也可以写为第二种方式:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="styleObj">我是文字</div> <!--法一:用对象的方式实现-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    styleObj: {
                        color: ‘pink‘,
                        width: ‘200px‘,
                    }
                }
            })
        </script>
    </body>
</html>

实现结果是:

五 用数组的方式实现style绑定

没法单独用数组的实现style绑定,或者我没有测试出来方法,写在这里纯粹是因为我有强迫症,需要占个位置

六 用数组和对象混合的方式实现style绑定

举个例子:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>class与style绑定</title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
    </head>
    <body>
        <div class="test">
            <div class="otherClass" :style="[styleObjectA,styleObjectB]">我是文字</div> <!--法一:用数组和对象的方式实现-->
        </div>
        <script type="text/javascript">
            var myVue = new Vue({
                el:".test",
                data: {
                    styleObjectA: {
                        color: ‘red‘,
                        width: ‘100px‘,
                    },
                    styleObjectB: {
                        top: ‘20px‘
                    }
                }
            })
        </script>
    </body>
</html>

实现效果:

时间: 2024-10-29 10:46:24

Vueclass与style绑定的相关文章

Vue.js Class与Style绑定

Class与Style绑定 对于数据绑定,一个常见的需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 来处理它们:只需要计算出表达式最终的字符串. 不过,字符串拼接麻烦又易错,因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串以外,还可以是对象或数组. 绑定HTML Class 1.对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class <div v-bin

Vue.2.0.5-Class 与 Style 绑定

Class 与 Style 绑定 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时, Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 对象语法 我们可以传给 v-bind:class 一个对象,以动态地切换 class . <div v-bind

Style绑定

目的 style绑定可以添加或者移除DOM元素的样式值.这非常有用,例如,当值为负数时将颜色变为红色. (注:如果要修改CSS整个类,请使用css绑定) <div data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }">    Profit Information </div>   <script type="text/javascript">

Vue#Class 与 Style 绑定

绑定HTMLCLASS 在我没看这之前,我觉得要写绑定class ,应该像绑定数据一样这么写 class ={{class-a}} 看官方教程时,不推荐这么写,推荐这样 v-bind:class="{ 'class-a': isA, 'class-b': isB }" 官方的解释,我觉得还是挺接地气的,最起码我能看的懂. 数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符

Vue2.0笔记——属性绑定和Class与Style绑定

属性绑定 通过指令v-bind可以绑定属性,该指令同v-on一样,也有一个简写,":"冒号.绑定元素的属性,并且可与元素的原属性共存.当原属性有值时则显示原属性的值,无值则使用绑定的值. <div id="app"> <img :src="url" :width="width" width="800" :height="height"/> </div>

Vue学习计划(基础三)-class与style绑定,条件渲染和列表渲染

Class与style绑定.条件渲染和列表渲染 目标: 熟练使用class与style绑定的多种方式 熟悉v-if与v-for的用法,以及v-if和v-for一起使用的注意事项 class与style绑定的多种方式 绑定class和style都是使用v-bind也就是: 无论是绑定class还是style,都有两种方式,一种是对象,一种是数组. class和:class是共存的 绑定示例 1.class对象绑定 <!-- 根据isActivity的真假,判断是否应用activity这个class

Vue教程:Class 与 Style 绑定(四)

绑定 HTML Class 对象语法 ①.添加单个class: <div v-bind:class="{ active: isActive }"></div> 上面的语法表示 active 这个 class 存在与否将取决于数据属性 isActive为真还是假. ②.添加多个class: <div class="static" v-bind:class="{ active: isActive, 'text-danger': h

Vue中Class与Style绑定

操作元素的class列表和内联样式是数据绑定的一个常见需求.因为它们都是属性,所以我们可以使用v-bind处理它们:只需要通过表达式计算出字符串结果即可.不过拼接字符串比较麻烦,因此在v-bind用于class和style时,vue做了专门的增强,表达式结果的类型除了字符串之外,还可以是对象和数组. 绑定HTML Class (1) 对象语法可以给v-bind:class一个对象,以动态切换class: <div v-bind:class="{active: isActive}"

vue入门:(class与style绑定)

对象语法 数组语法 一.对象语法 1.1对象语法绑定HTML Class 语法:v-bind:class="{'className1':boolean1,'className2':boolean2}" 1 <style> 2 div{ 3 width: 100px; 4 height: 100px; 5 } 6 .class1{ 7 background-color: #ff0; 8 } 9 .class2{ 10 background-color:#f00; 11 } 1