本文介绍了是否可以将内联样式与vue.js绑定?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我很好奇,是否可以在Vue.js中绑定内联样式?我对类绑定很熟悉,但是如果有时出于某种原因想要内联绑定样式语句,又有可能像对类一样进行绑定吗?
I am curious, is it possible to bind the inline style in Vue.js? I'm familiar with class binding but what if sometimes for some reason you want to bind a style statement inline, is it possible to bind it like you do with class?
例如,
<template> <div> <h1 :style="{('background:red') : condition}"> Text </h1> <button @click='condition = true'>Click me</button> </div> </template> <script> export default { data(){ return { condition:false } } } </script>在上面的示例中,我想在条件变为真时更改元素的背景.
In the example above I'd like to change the background of the element when the condition becomes true.
推荐答案当然可以按照此处的描述进行操作: vuejs/v2/guide/class-and-style.html
Of course it is possible as described here: vuejs/v2/guide/class-and-style.html
<template> <div> <h1 v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"> Text </h1> <button @click='condition = true'>Click me</button> </div> </template> <script> export default { data(){ return { condition:false, activeColor: 'white', fontSize: 12 } } } </script>更多推荐
是否可以将内联样式与vue.js绑定?
发布评论