vue中style的用法

最近学习了vue中class和class的用法,想来总结一下,也把我的知识提供给大家使用;首先来总结class的用法,vue中的class有4种写法;class和style都属于DOM属性,所以在vue中都用:class和:style表示

同样给id为box的div加上字体和颜色和背景颜色

方法一

<div id="box">

   <strong :style="{color:‘red‘,background:‘blue‘}">落入凡尘伤情着我</strong>  

</div>

<script>

  new  Vue({

    el:"#box",

  });

</script>

方法二

<div id="box">

   <strong :style="c">落入凡尘伤情着我</strong>  

</div>

<script>

  new  Vue({

    el:"#box",

    data:{

        c:{

          color:‘red‘,background:‘blue‘

        }

    }

  });

</script>

 

时间: 2024-10-17 23:07:33

vue中style的用法的相关文章

Vue中mixin的用法

在项目中我们经常会遇到多个组件调用同一个方法的问题,为了避免每次都在.vue文件中定义并调用,我们可采用vue的mixin的用法: 具体使用如下: 我们需要在main.js中引入mixins文件夹下的index.js文件, 这样,我们准备工作就做好了,那么在.vue文件中,我们就可以调用啦: 大功告成,其实很好理解的! 原文地址:https://www.cnblogs.com/yuwenjing0727/p/9304103.html

----Vue 中mixin 的用法详解----

说下我对vue中mixin的一点理解 vue中提供了一种混合机制--mixins,用来更高效的实现组件内容的复用.最开始我一度认为这个和组件好像没啥区别..后来发现错了.下面我们来看看mixins和普通情况下引入组件有什么区别? 组件在引用之后相当于在父组件内开辟了一块单独的空间,来根据父组件props过来的值进行相应的操作,单本质上两者还是泾渭分明,相对独立. 而mixins则是在引入组件之后,则是将组件内部的内容如data等方法.method等属性与父组件相应内容进行合并.相当于在引入后,父

vue 中 scoped的用法 以及css文件引入问题的补充

自:https://blog.csdn.net/weixin_39941429/article/details/80254724 下面再说说VUE中scoped的编译原理吧.具体可以参考vue-loader 所谓的局部css,就是通过vue-loader这个插件,在编译打包的时候将带有scoped属性的css打上一个tag,同时将template内的所有html都打上一个相同的tag,最后通过css的属性选择器定位,造就了所谓的局部css.参考scoped内复写组件样式 css-loader对i

vue中slot的用法案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slot</title> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id=&

vue中v-for的用法以及参数的作用

1 <template> 2 <div> 3 <div class="content clearfix" v-on:click="goorderingDetail(v)" v-for="(v,index) in anylist" :key="index"> 4 <div class="clearfix"> 5 <div class="fl di

vue中return的用法理解

在做项目的时候有的时候项目紧急,所以只需要知道如何使用一下方法实现相应的功能,没得停留下来研究理解为什么要这样使用,所以今天趁不忙就写一下自己对return的理解,一方面是加深自己的理解,另一方面也希望能帮助到需要的人! 我先抛出一个简单的问题:return后面可以跟执行语句或者函数么? 答案:可以! 但是有一点,return不论是什么,都是直接返回,即使是语句或者函数也不会执行的!是函数就返回该函数! 下面从一个例子来加深对return用法的理解: export function getTab

vue中 $event 的用法--获取当前父元素,子元素,兄弟元素

<button @click = “clickfun($event)”>点击</button> methods: { clickfun(e) { // e.target 是你当前点击的元素 // e.currentTarget 是你绑定事件的元素 #获得点击元素的前一个元素 e.currentTarget.previousElementSibling.innerHTML #获得点击元素的第一个子元素 e.currentTarget.firstElementChild # 获得点击元

vue中$refs的用法及作用详解

一般来讲,获取DOM元素,需要使用document.querySelector('#input1')方法去获取dom节点,然后再获取input1的值. 但是使用了ref绑定之后,我们就不需要再获取dom节点了,可以直接在上面的input上绑定input1,然后$refs里面调用就行. 然后在JavaScript里面通过this.$refs.input1去调用就行了. 这样可以有效减少获取dom节点的性能消耗. HTML <div id="app"> <input ty

vue中$set的用法

数组: this.$set(Array,index, newValue) 对象: this.$set(Object, key, value) 原文地址:https://www.cnblogs.com/huanhuan55/p/10276326.html