Question

我有一个渲染元素的组件。每个元素的宽度取决于minimized值（true或false）。我需要没有类的条件样式绑定。

我试过了：

{ conversation.minimized == false ? right: $index * 285 + 'px' : right: $index * 150 + 'px' }

但它没有工作，我遇到了错误。

Answer 1

我不确定你要做什么。但你想让div更小或更大？如果是这样，您可以使用计算var来评估该值。而且因为它是被动的，如果你改变任何这些值，它将动态评估价值。

一个小例子：

import UIKit
import Alamofire
class ViewController: UIViewController {

let headers = ["Host":"data.usajobs.gov",
               "User-Agent":"dezbill@icloud.com",
               "Authorization-Key":"********************"
             ]

@IBOutlet weak var jobKeywordTxt: UITextField!

@IBOutlet var locationTxt: UITextField!
@IBOutlet weak var locationState: UITextField!

override func viewDidLoad() {
    super.viewDidLoad()

}

override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(true)

}


@IBAction func searchBtn(sender: UIButton) {

    let jobKeyword = jobKeywordTxt.text
    let location = locationTxt.text

    Alamofire.request(.GET, "https://data.usajobs.gov/api/Search", parameters:["LocationName":location!,"PositionTitle":jobKeyword!]).responseJSON { response in
          debugPrint(response)
          print(self.locationTxt.text)
    }
}

在你的HTML上

<style>
  .classA {float:right,width:200px}
  .classB {float:right,width:400px}
</style>

并在你的Vue上

<div id="#app">
<div class="{{ classChanger }}">your stuff</div>
</div>

如果不完全了解您的代码，那就更难了。

Answer 2

currentItemPosition: function(index, conversation) {
            var indexOfCurrentElement = this.conversations.indexOf(conversation);  
            var right = 0;

            if (indexOfCurrentElement > 0) {
                for (var i=0; i<indexOfCurrentElement; i++) {
                    if (!this.conversations[i].minimized) {
                        right += 285;
                    } else {
                        right += 170;
                    }
                }
                return "right: " + right + "px";

            } else {
                return "right: 0px";
            } 
        }
    }

这就是我解决问题的方法。

<div class="card" v-bind:style="currentItemPosition($index, conversation)">

现在对我来说非常合适。无论如何，根据<div>标签进行操作有很多逻辑。

Answer 3

我并没有真正得到您的代码，但是如果您想要条件样式绑定，您可以这样做：

<template>
    <div
        :style="condition ? { 'color': 'red' } : { 'color': 'blue' }"
    >
        Some data
    </div>
</template>

<script>
export default {
    data() {
        return {
            condition: false
        }
    }
}
</script>

Answer 4

为了使模块更加模块化，我们可以创建一个组件来包装div和样式的逻辑。用法是：

<card :index="$index" :minimized="conversation.minimized"></card>

该组件的定义是：

Vue.component( 'card', {
    props: ['index', 'minimized'],
    template: '\
        <div class="card" :style=[cardStyles]>\
    ',
    computed: function () {
        cardStyles: function () {
            var ratio = this.minimized ? 150 : 285;
            return {
                right: ( this.index * ratio ) + 'px'
            }
        }
    }
} );

它接收index和minified值，然后使用计算函数来获取div样式。

使用Vue.js进行条件样式渲染

4 个答案: