Vue.js中的绑定样式实现

2024-12-03 02:41:01

绑定class样式

1、字符串写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue初识</title>
    <script type="text/javascript" src="./js/vue.js"></script>
    <style>
        .basic{
            width: 400px;
            height: 100px;
            border:1px solid black
        }
        .happy{
            background: pink;
        }
        .sad{
            background: skyblue;
        }
        .normal{
            background: aquamarine;
        }
    </style>
</head>
<body>
<div id="root">
    <!--绑定class样式--字符串写法，适用于：样式类名不确定，需动态指定-->
   <div class="basic" :class="mood" @click="changeMood">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el:"#root",
        data:{
            name:'好好学习',
            mood:'normal'
        },
        methods:{
            changeMood(){
                const arr = ['happy','sad','normal']
                //生成0-2的随机数
                this.mood = arr[Math.floor(Math.random()*3)]
            }
        }
    })
</script>
</body>
</html>

2、数组写法

<!DOCTYPE html>
<html lang="en">
<head>
    ......
    <style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black
        }
        ......
        .addOne {
            background: orange;
        }
        .addTwo {
            font-size: 40px;
        }
        .addThree {
            border-radius: 5px;
        }
    </style>
</head>
<body>
<div id="root">
    ......
    <!--绑定class样式--数组写法，适用于：要绑定的样式个数和名字都不确定-->
    <div class="basic" :class="classArr">{{name}}</div>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: "#root",
        data: {
            name: '好好学习',
            mood: 'normal',
            classArr: ['addOne', 'addTwo', 'addThree']
        }
        ......
    })
</script>
</body>
</html>

3、对象写法

<style>
        .basic {
            width: 400px;
            height: 100px;
            border: 1px solid black
        }
        .addOne {
            background: orange;
        }

        .addTwo {
            font-size: 40px;
        }
    </style>
<!--绑定class样式-对象写法-适用于：绑定样式个数确定，名字也确定，但动态决定用不用-->
<div class="basic" :class="classObj">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el:"#root",
        data:{
            name:"好好学习",
            classObj:{
                addOne:false,
                addTwo:true
            }
        }
    })
</script>

style 绑定样式

<!--正常的style写法-->
<div class="basic" style="font-size: 40px">{{name}}</div>
<!--使用vue展示样式-->
<div class="basic" :style="{fontSize:fsize+'px'}">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: "#root",
        data: {
            name: "好好学习",
            fsize: 40
        }
    })
</script>

或者使用 style 对象写法：

<div class="basic" :style="styleObj">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false
    new Vue({
        el: "#root",
        data: {
            name: "好好学习",
            styleObj:{
                fontSize:"30px",
                color:"red",
                backgroundColor:"orange"
            }
        }
    })
</script>

或者 style 数组写法：

<div class="basic" :style="[styleObj,styleObj2]">{{name}}</div>
<script type="text/javascript">
    Vue.config.productionTip = false

    new Vue({
        el: "#root",
        data: {
            name: "好好学习",
            styleObj:{
                fontSize:"30px",
                color:"red"
            },
            styleObj2:{
                backgroundColor:"orange"
            }
        }
    })
</script>

绑定样式

1、class样式

写法：class="xxx" xxx 可以是字符串、对象、数组
字符串写法适用于：类名不确定，要动态获取
对象写法适用于：要绑定多个样式，个数不确定，名字也不确定
数组写法适用于：要绑定多个样式，个数确定，名字也确定，但不确定用不用

2、 style样式 :style="{fontsize: xxx}"其中xxx是动态值

:style="[a,b]"其中a、b是样式对象

scoped

作用：让样式在局部生效，防止冲突写法:：<style scoped> 后期在组件中用

到此这篇关于Vue.js中的绑定样式实现的文章就介绍到这了,更多相关Vue绑定样式内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue.js样式动态绑定实现小结

在项目中,我们时常会遇到动态的去绑定操作切换不同的CSS样式,结合自身项目中遇到的一些情况,也参考了一些文档,针对vue.js样式的动态绑定切换做出如下小结: 动态切换的核心思想: 利用vue指令v-bind来实现动态绑定,从而设置切换不同的样式- vue的最大特点是数据驱动,利用特殊的语法将DOM"绑定"到底层数据,DOM与数据保持同步,每当数据发生变化,DOM视图就会做出相应的更新和响应,正是基于这种特性,我们得以实现class和style的动态绑定- (一定要充分理解数据驱动的含
vue.js入门教程之绑定class和style样式

一.前言相信大家都知道数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是属性,我们可以用 v-bind 处理它们:我们只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 二.绑定 HTML Class 请注意:尽管可以用 Mustache 标签绑定 class,比如 class="{{ className }}&quo
Vue.js基础学习之class与样式绑定

打着巩固 css 知识的旗号开始了对 vue 样式绑定的研究,相比前一篇的 demo,本次内容多了各种样式在里面,变得稍微花哨了些,话不多说,直接上代码吧: <html> <head> <meta charset="utf-8"> <title>Vue test</title> <style type="text/css"> body {font-family: Verdana;} p { fo
Vue.js每天必学之Class与样式绑定

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 绑定 HTML Class 尽管可以用 Mustache 标签绑定 class,比如 `{% raw %}class="{{ className }}"
vue.js学习笔记之绑定style样式和class列表

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 一.绑定Class属性. 绑定数据用v-bind:命令,简写成: 语法:<div v-bind:class="{ active: isActive }&q
vue.js绑定class和style样式（6）

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式.因为它们都是 attribute,我们可以用 v-bind 处理它们:只需要计算出表达式最终的字符串.不过,字符串拼接麻烦又易错.因此,在 v-bind 用于 class 和 style 时,Vue.js 专门增强了它.表达式的结果类型除了字符串之外,还可以是对象或数组. 通过 v-bind:class 或者 :class 来为style或者class来绑定绑定class <div class="test">
Vue.js中的绑定样式实现

目录绑定class样式 1.字符串写法 2.数组写法 3.对象写法 style 绑定样式 scoped 绑定class样式 1.字符串写法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue初识</title> <script type="text/javascript"
学习vue.js中class与style绑定

关于vue.js中class与style绑定的练习代码,分享给大家,供大家参考: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vuejs中Class与Style 绑定</title> <link rel="stylesheet" href="css/vu
Vue.js 中的 v-model 指令及绑定表单元素的方法

我们可以使用 Vue.js 中的 v-model 指令来完成表单数据的双向绑定. 1 基础用法 1.1 文本输入框(text) 这里演示了在文本输入框上输入的内容,会实时映射到绑定的数据上. html: <div id="app"> <input type="text" v-model="content" placeholder="请输入"> <p>输入框:{{content}}</p
基于vue.js中关于下拉框的值默认及绑定问题

一.今天遇到vue中下拉框问题,故而写点东西留个脚印 <template> <select v-model='selected' @click="disable()"> <option v-for="(option,index) in options" v-bind:value="option.value" :disabled="option.disabled"> {{ option.tex
Vue.js中用v-bind绑定class的注意事项

前言在Vue.js版本:1.0.27,使用Vue.js中V-bind指令来绑定class和style时,Vue.js对其进行了增强.表达式结果出了字符串之外,还可以是对象或者数组. 这里自己对其进行了测试,发现有一下的问题: 如果使用对象语法对class进行绑定话,class名称必须加上引号,代表所对应的样式,否则会将其当做对象的属性,从而使得初始化报错. <!DOCTYPE html> <html lang="en"> <head> <me
vue.js中指令Directives详解

想必喜欢前端开发的小伙伴们都或多或少接触过MVVM这个概念,说起MVVM,第一时间想到的便是angularjs,knockoutjs等已经被广泛运用的MVVM框架,之前我也没有在这方面有很多了解,最近在做项目的过程中接触了Vue.js,这是一个小巧精致,性能优异的MVVM框架,可以说对初学者是比较容易入门的,该框架的英文文档写得很好,但是中文版访问还不太稳定,翻译也有待改进,所以自己一遍学习,一遍记录自己的思考,与各位共享学习的经验. 第一篇主要是想谈谈vue.js中的Directives即指令
解析Vue.js中的组件

介绍在使用Vue.js时,Vue.js组件非常重要.在本教程中,我们将深入研究Vue.js组件,理解基础知识并将其应用于应用程序.让我们开始吧. 什么是组件? 组件使我们能够将复杂的应用程序分解成小块.例如,典型的Web应用程序将具有标题,侧边栏,内容和页脚等部分. Vue.js允许我们将每个部分分解成单独的模块化代码,称为组件.这些组件可以扩展,然后附加到你正在处理的应用程序. 使用组件是在整个应用程序编写中重用代码的好方法. 假设你有一个博客应用程序,并且你想要显
Vue.js 中的 v-cloak 指令及使用详解

先来看下vue.js 中的v-cloak 指令可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除. 当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码.我们可以使用 v-cloak 指令来解决这一问题. html: <div id="app"> {{context}} </div> js: <script> var app = new
Vue.js 中的 v-show 指令及用法详解

1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc
Vue.js中对css的操作（修改）具体方式详解

使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas