Question

我需要找到一种在样式属性中使用VueJS变量的方法，例如当我尝试<p style="color:[% randomColor() %];></p>之类的东西时，它会在我的控制台上消失。

以下是关于小提琴的示例：https://jsfiddle.net/Lindow/bjfvdgde/3/

HTML：

<div id="app">
    <p style="color:[% randomColor() %];">[% nameAttr() %]</p>
</div>

JavaScript：

var color = new Vue({
    el:'#app',
    methods:{
        nameAttr:function(){
          var name = 'John Doe';
          return name 
        },
        randomColor:function(){
            var font_color = "red";
            return font_color
        }
  },
  delimiters: ["[%","%]"]
});

如何解决这个问题？

Answer 1

<div id="app">
  <p :style="{color:randomColor()}">[% nameAttr() %]</p>
</div>

在此处阅读更多内容：vue website

Answer 2

您应该使用 v-bind：style 指令

<p v-bind:style="{color:randomColor()}">[% nameAttr() %]</p>

Answer 3

我使用以下代码段根据当前图像设置div的背景。

create table #table1 (ID varchar(20), Description varchar(20))

insert into #table1 values 
 ('D01' , 'T02')
,('D01' , 'T03')
,('D02' , 'T01')
,('D02' , 'T03')
,('D03' , 'T01')
,('D03' , 'T02')
,('D03' , 'T03')
,('D03' , 'T04')


select ID, Description from (
select a.ID, case when a.Description =  'T02' then  'T02' else null end  as Description
, row_number()over(partition by a.id order by a.id, case when a.Description =  'T02' then  'T02' else null end desc) rno
from #table1 a
LEFT JOIN #table1 b on a.id =b.ID   )a where rno=1

currentImg 可以替换为任何变量名称，例如 myVariable

如何在style属性中使用Vue.js变量？

3 个答案: