Neste artigo, vamos dar uma olhada no uso dos comandos v-for, v-if e v-show . Esses três comandos são comumente usados. A propósito, explicaremos uma questão de entrevista de alta frequência: a diferença entre v-if e v-show.
v-para
v-for é muito comum no desenvolvimento de negócios real. Quando aprendemos algumas linguagens de alto nível, todos conhecemos o loop for . Por meio do loop, podemos percorrer os grupos de dados com especificações de dados semelhantes .
Vamos pensar em um cenário de negócios: no shopping, clicamos em uma categoria de produto e muitos produtos com especificações semelhantes serão processados .
Se 20 conjuntos de produtos forem renderizados, devem ser escritos 20 componentes idênticos? Os programadores não devem ser tão estúpidos.
O conteúdo de um cartão de produto pode incluir fotos, nomes, preços, inventário e descrições de produtos. Esses 20 produtos são todos esses campos, mas o valor do campo é alterado.
Então, é isso que a instrução v-for faz.
Usando v-for, podemos usar um código de cartão de produto para renderizar produtos infinitos pelo tempo que quisermos.
Vamos falar sobre a sintaxe básica:
<div id="app">
<ul>
<li v-for="item in items">
{
{item}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
items:[59,82,96,41,55,2,4,91,25],
},
});
</script>
Este é o uso mais básico do v-for . Os itens e itens em v-for podem ser alterados arbitrariamente, mas os itens devem ter o mesmo nome da matriz a ser renderizada . Como o nome da matriz em meus dados são itens, também escrevo itens aqui .
Vamos dar uma olhada no efeito primeiro:
se quisermos indexar , apenas altere o conteúdo em v-for para " (item, índice) em itens ".
<ul>
<li v-for="(item,index) in items">
索引:{
{index}},内容:{
{item}}
</li>
</ul>
Observe o efeito:
em alguns cenários de negócios, precisamos da ajuda de índices.
Estamos falando sobre a renderização do array acima , vamos falar sobre objetos renderizados .
<div id="app">
<ul>
<li v-for="item in Students">
{
{item.name}} - {
{item.age}}
</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
Students:[
{
name:'Ray',
age:18
},
{
name:'Creator',
age:20
},
{
name:'Code',
age:3
}
]
},
</script>
Vamos dar uma olhada no resultado primeiro:
a forma do código do objeto de renderização é muito semelhante ao array de renderização. Quando renderizamos o array, precisamos
apenas escrever item na expressão de interpolação { {}}, mas ao renderizar o objeto, precisamos de {
{item.attribute}} , que é relativamente simples. O uso do índice é o mesmo do array .
Devido ao espaço limitado, citamos apenas um pequeno exemplo. Os cenários de aplicação de v-for são muito amplos e podem otimizar muitos códigos para nós.
v-if
Como controlamos se um componente é exibido ? Na verdade, existem muitos métodos, mas o v-if fornecido pelo vue é muito fácil de usar.
O código básico é o seguinte:
<div id="app">
<p v-if="msg">我被显示了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:true
}
});
</script>
Escrevemos um v-if na tag p e associamos uma variável a msg. Nos dados, atribuímos o valor booleano true a msg, portanto, logicamente falando, essa tag p será exibida.
sem problemas.
O uso de v-if é muito simples , mas os cenários de aplicação também são muito extensos . Podemos lidar com os valores das variáveis vinculados por v-if em muitos eventos de método para controlar a exibição e ocultação de componentes . Esta instrução é muito, muito importante .
v-show
Por falar em v-show, sua função é a mesma que v-if. Mas eles são fundamentalmente diferentes.Esta diferença é freqüentemente questionada em entrevistas.
Vamos primeiro escrever seu formato de código básico:
<div id="app">
<p v-show="msg">我被显示了</p>
</div>
<script>
new Vue({
el:'#app',
data:{
msg:true
}
});
</script>
É o mesmo que v-if?
Mas vamos dar uma olhada mais de perto. Quando alteramos o valor de msg para falso , abra F12 e observe o código.
De fato, não há conteúdo exibido na página. mas! ! ! Na estrutura DOM, a tag p foi realmente montada, mas o valor da propriedade display CSS foi alterado para none ! ! !
Usamos a mesma operação para observar a estrutura DOM de v-if .
A tag p não está montada no DOM ! ! !
Portanto, esta é a diferença mais fundamental entre v-if e v-show , knock on the negro. Este ponto de conhecimento é extremamente alto em algumas entrevistas básicas .
Ambos v-if e v-show têm seus próprios cenários de aplicação. Você pode pensar sobre isso com cuidado. De acordo com suas características, quando usar v-if e quando usar v-show. Vale a pena pensar nisso.
Há um projeto de curso do mini programa WeChat, necessidades de projeto completas, entre em contato com QQ pessoal: 505417246
Siga a conta oficial do WeChat abaixo, você pode receber applet WeChat, Vue, TypeScript, front-end, uni-app, pilha completa, Nodejs, Python e outros materiais de aprendizagem práticos
