我目前很难弄清楚如何在if-else语句中使用多个条件。我可以一次做1个条件，但倍数对我来说是一个问题。我不太确定从哪个开始使用HTML表单，我不知道从哪里开始。我也不确定从哪里开始。任何示例代码都很好，因为我想学习而不是让人们为我解决所有问题。
答案 0 :(得分：3)
好的，让我们从头开始。
您同意此代码：
if (true)
console.log('foo');
显然会在您的控制台上打印出'foo'，因为条件已满足（即true）。
让我们现在尝试一些不同的东西：
if (true && false)
console.log('bar');
Javascript和大多数编程语言中的&&是and运算符，仅当左侧和右侧的条件都为true时才会计算为true 。这意味着上面的代码不打印出'bar'。
if (true || false)
console.log('bla');
另一方面，||运算符是or运算符，当两个条件之一（或两者）为true时，true运算符为'bla'。在这种情况下，!将打印在您的控制台上。
最后，让我们看看not运算符（true）：如果运算符后面的条件是false，那么它的计算结果为if (!false)，反之亦然。所以写if (true)等于if。
现在，您可以应用这些简单规则，在一个else或<template>
<div id="wrapper">
<div id="divOne">
<!-- Add or remove component here dynamically -->
</div>
<div id="divTwo">
<!-- Add or remove component here dynamically -->
</div>
<!-- There will be more divs like #divOne #divTwo above -->
<div>
<input type="radio" id="one" value="divOne" v-model="pickedDiv">
<label for="one">One</label>
</div>
<div>
<input type="radio" id="two" value="divTwo" v-model="pickedDiv">
<label for="two">Two</label>
</div>
<button @click="addComponent">Add Component</button>
</div>
</template>
<script>
import SomeComponent from './SomeComponent'
export default {
data() {
return {
pickedDiv: '',
pickedDivPreviously: ''
propItems: ['item1', 'item2']
}
}
methods: {
addComponent () {
//-- This is not working code but I need something like this --//
this.pickedDivPreviously = this.pickedDiv // event not sure how to get previously selected div
const divThatIsPicked = document.getElementById(this.pickedDiv)
const divThatWasPickedPreviously = document.getElementById(this.pickedDivPreviously)
// code here to remove/empty/destroy old component from 'divThatWasPickedPreviously'
divThatWasPickedPreviously.innerHTML = ""
// code here to add new component in 'divThatIsPicked'
divThatIsPicked.appendChild('<some-component :someProp="propItems" @someEvent="someFn">')
}
}
}
</script>
分支中轻松使用多个逻辑条件。记住逻辑运算符的优先级，即如果你有多个逻辑运算符，首先要评估哪一个，看看这里：Which Logic Operator Takes Precedence