[vue3新特性] 13.style v-bind

Posted 2023-05-12

参考技术A

在vue3.2中增加了一个style v-bind的特性，简单来说就是把我们script中的数据可以在style标签中使用，下面我们来写一个最简单的例子
我们定义一个color数据，它的值是red，然后在style标签中使用它：

页面上显示

如果我们把color改成绿色：

然后文字就会变成绿色：

这个功能我觉着最常用的就是一个元素的状态了，比如说我们上面这个.box元素，正常状态背景是白色的，激活状态是红色的。
以前我们做这个功能时，需要定义一个正常状态的class，还有一个激活状态的class，根据数据的值来绑定激活的这个class。
现在就不用这么做了，直接把判断写在style里面，
需要注意的是，v-bind里面写的js表达式必须使用引号包起来
下面就来写一个最基础的例子：

这样在isActive是true的时候，box的背景颜色就是红色了

style v-bind使用就是这么简单了。

Vue.js v-bind:style 伪元素 :: 在内容图标之后

【中文标题】Vue.js v-bind:style 伪元素 :: 在内容图标之后

【英文标题】：Vue.js v-bind:style Pseudo element :: after content icon

【发布时间】：2018-11-10 13:34:30

【问题描述】：

我有一个 Bootstrap Vue ProgressBar。我需要在带有内容图标（来自FontAwsome）之后添加到类“.progress-bar”伪元素::。我也希望它是动态的。因为我已经在我的 ProgressBar 中实现了步骤（从 0 tp 100）并且我想要，当我点击时，这个图标将与 ProgressBar 线一起出现。

<b-progress v-bind:style="styleProgressBar" :value="counter" :max="max"></b-progress>

 export default 
        components:
            'navbar':navbar
        ,
        name: "myPage",
        data() 
            return 
                counter: 0,
                max: 100,
                step:1,
            
        ,
        methods:
            prev() 
                this.step--;
            ,
            next() 
                this.step++;
                if (this.counter < 100) 
                    this.counter += 34;
                
            
        
    

我也看到了这个：https://vuejs.org/v2/guide/class-and-style.html

<div v-bind:style="styleObject"></div>

data: 
  styleObject: 
    color: 'red',
    fontSize: '13px'
  

【参考方案1】：

假设你有一个父组件：

<div id="parent">
  <ChildComponent id="child"> // Possibly from another library?
</div>

// renders ->

<div id="parent">
   <div id="child">
     <div id="child-component-item">
        ::after
     </div>
   </div>
</div>

挑战是为#child-component-item:after 选择器创建绑定。

我们可以使用 css vars 来解决这个问题，通过一些 CSS 来“进入”子组件。请注意，如果您的样式是scoped，则可能必须使用::v-deep。

父组件.js

<div id="parent-component" :style="'--bgColor': bgColor">
   <ChildComponent>
</div>

<script>
  export default 
    data() 
      return 
        bgColor: 'red'
      
    
  
</script>

<style>
   #child-component-item:after 
      background-color: var(--bgColor)
   
</style>

【讨论】：

这对我有用。如果您想使用具有不同样式道具的组件，它会保留该组件的样式。

【参考方案2】：

使用css var()

然后:style=" '--varName': xxx"

【讨论】：

更多类似的方法在这里：***.com/questions/47322875/…

【参考方案3】：

您似乎想在进度条后面添加一个图标。

如果是，请查看下面的demo，它使用一个span模拟图标，然后绑定left移动图标。

Vue.config.productionTip = false
app = new Vue(
  el: "#app",
  data: 
    counter: 0,
    max: 100,
    intervalID: null
  ,
  methods: 
    runTask: function ()       
      clearInterval(this.intervalID)
      this.counter = 0
      this.intervalID = setInterval(() => 
        this.counter = (this.counter+7)%this.max
      , 1000)
    
  
)

.badge 
  background-color:green;
  border: 1px solid black;
  padding: 2px;
  transition: 1s;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
  <button @click="runTask()">Run</button>
  <b-progress class="mt-1" :max="max" show-value>
     <b-progress-bar :value="counter" variant="success">
        <span class="badge" style="position:absolute;" :style="'left':counter*100/max + '%'" v-show="counter > 0">x</span>
     </b-progress-bar>
  </b-progress>
</div>

【讨论】：

虽然是一个很好的答案，但这并不是 OP 关于如何设置伪元素样式的问题。所有这一切都是添加一个额外的元素并对其应用内联样式。