Vue样式及动态绑定

最新推荐文章于 2025-06-11 20:06:40 发布

DiuDiu___

最新推荐文章于 2025-06-11 20:06:40 发布

阅读量4.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/DiuDiu_ya/article/details/99694974

本文介绍了Vue中样式的使用，包括class样式和内联样式，详细讲解了动态绑定样式和style，以及过滤器的定义和用法。还讨论了v-if与v-show的选择，以及ref属性和nextTick在解决异步问题中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue样式

在Vue 中使用样式；
一、使用class样式：
类名必须用引号引起来；
1、数组
<h1 :class = "['类名1','类名2']">这种方法需要用 v-bind: => : 绑定
2、数组中使用三元表达式
<h1 :class = "['类名1','类名2',表达式?'类名3':'']">这种方法需要用 v-bind: => : 绑定
3、数组中嵌套对象
<h1 :class = "['类名1','类名2',{属性名(类名):'属性值(true或false)}]">这种方法需要用 v-bind: => : 绑定
4、直接适用对象
<h1 :class = "{属性名(类名1):true,属性名(类名2):true}">这种方法需要用 v-bind: => : 绑定
一般可变的通过vue 来写；
二、使用内联样式；
1、直接在元素上通过 :style 的形式
<h1 :style = "{'样式名':'样式值'}">这种方法需要用 v-bind: => : 绑定
2、将样式对象，定义到data 中，在引用到 :style 中
<h1 :style = "vue里的样式">这种方法需要用 v-bind: => : 绑定
3、在 :style 中通过数组，引用多个 data 上的样式对象；
<h1 :style = "[data1,data2]">这种方法需要用 v-bind: => : 绑定

过滤器

Vue中过滤器有两种定义方式?
1.全局过滤器 2.局部过滤器

Vue.filter('myfilter', function(val) {
          return formatNum(val);
        })

用法

  var app = new Vue({
            el: "#app",
            methods: {

            },
            data: {
                money: "1000000000000000000"
            },
            filters: { //过滤器的方法
                myfilter(val) {
                    return fn(val) //fn为自己定义的一个函数
                }
            }
        })

在html中引用过滤器

 <div id="app">
        {{money | myfilter}}
    </div>

v-if和v-show的用法

v-show：
html中需要隐藏的元素上加 v-show=" "即可
一下为 v-show的案例

<body>
    <div id="app">
        <div v-show="flag">吃饭睡觉打豆豆</div>
        <button @click="flag=!flag">显示/隐藏</button>
    </div>
</body>
<script>
var app =new Vue({
    el:"#app",
    data:{
        flag:true
    }
})
</script>

v-if：
v-if和v-else可以一起用，案例为两个页面切换
显示的内容不一样

<body>
    <div id="app">
        <button @click="flag=!flag">切换模板</button>
        <template v-if="flag"> //v-if   如果flag为true，显示登录
            <div>
                <span>登录</span>
                <input type="text" key="1">
            </div>
        </template>
        <template v-else>//v-else，则显示注册  必须用template
            <div>
                <span>注册</span>
                <input type="text" key="2">
            </div>
        </template>

    </div>
    <script>
        //     template标签在渲染时不会被渲染出来！！！
        //   template模板必须使用v-if
        var app = new Vue({
            el: "#app",
            data: {
                flag: true
            }
        })
    </script>
</body>

动态绑定样式

style写一个类名的样式，vue模块中data里要加上myclass，值为设置的类名

 .border {
            border: 1px solid #999;
            border-radius: 50%;
        }

VUE模块为：

 var app = new Vue({
            el: "#app",
            data: {
                flag: true,
                myclass: "border"
            }
        })

对象方式 {className: 数据模型}

 <div :class="{border:flag}" class="box"></div>

数组可以进行属性绑定

 <div :class="[flag?myclass:null]" class="box"></div>

表达式

 <div :class="flag?'box border':'box'"></div>

动态绑定style

vue块中data里的属性应加上对象写入要增加的样式

 var app = new Vue({
            el: "#app",
            data: {
                flag: true,
                mystyle: {
                    borderRadius: '50%'
                }
            }
        })

对象方式进行绑定 {css属性值: 值或者数据模型}

  <div class="box" :style="{borderRadius:'50%'}"></div>

传进去的数据模型应该是对象形式的样式！！！

 <div class="box" :style="[mystyle]"></div>

表达式

<div class="box" :style="flag?'border-radius:50%':''"></div>

ref属性

ref用来要查找的元素，在此元素上加上ref属性，vue中用$refs来查找

 <div id="app">
        <div class="box" ref="za">11111111111</div>
    </div>
    <script>
    var app =new Vue({
        el:"#app",
        data:{},
        mounted(){
            this.$refs.za.style.background="red" 
        }
    })
    
    </script>

nextTick 滴答

用来解决页面中异步问题
例如：加载页面时聚焦
由于加载页面时异步，需要消耗一定的时间，而聚焦是同步，所以通常会在没有页面加载完毕时，聚焦这个动作已完成，所以当页面加载完毕后会没有聚焦的效果，可以用nextTick 来解决，记住使用nextTick 这个方法是通常使用$nextTick并使用箭头函数

  <div id="app">
        <button @click="showfo">显示隐藏</button>
        <input type="text" ref="ipt" v-if="flag">
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                flag: true,
            },
            methods: {

                // nextTick  CPU执行，时间片。0-1ms 1-2ms
                // 当页面渲染完毕之后执行nextTick的回调函数。
                // nextTick 原理是什么？mutationObserver
                showfo() {
                    this.flag = !this.flag;
                    this.$nextTick(() => {
                        if (this.flag) {
                            this.$refs.ipt.focus();
                        }
                    })
                }
            }
        })
    </script>