Declaración condicional y declaración de bucle de Vue --- kalrry
1. declaración condicional v-if
1. v-si
<div id="app">
<p v-if="ok">v-if条件判读</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2. v-otro
Genere aleatoriamente un número, determine si es mayor que 0.5 y luego emita la información correspondiente:
<div id="app">
<p v-if="Math.random()>0.5">
Sorry</p>
<p v-else>Not Sorry</p>
</div>
<script>
new Vue({
el: '#app'
})
</script>
3. v-si no-si
Usar con v-if para formar una estructura if-else if-else
<div id="app">
<p v-if="grade>=85">优秀</p>
<p v-else-if="grade>=70 && grade<850">良好</p>
<P v-else-if="grade>=60 && grade<70">及格</P>
<p v-else>不及格</p>
</div>
<script>
new Vue({
el: '#app',
data:{
grade: Math.random()*100
}
})
4. v-show
También podemos usar la directiva v-show para mostrar elementos condicionalmente
<div id="app">
<p v-show="ok">我们也可以使用 v-show 指令来根据条件展示元素</p>
</div>
<script>
new Vue({
el: '#app',
data: {
ok: true
}
})
</script>
2. instrucción de bucle v-for
La directiva v-for requiere una sintaxis especial en el formulario sitio en sitios, donde sitios es una matriz de datos de origen y sitio es un alias para la iteración de elementos de la matriz.
1. Ejemplo: lista de representación de matriz de bucle v-for
<div id="app">
<li v-for="item in browser">{
{
item.name}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
browser:[{
name: 'Chrome' },{
name: 'IE' },{
name: 'FireFox' }]
}
})
</script>
2. Ejemplo: lista de representación de objetos de bucle v-for
<div id="app">
<ul>
<li v-for="value in object">
{
{
value }}
</li>
</ul>
</div>
<script>
new Vue({
el: '#app',
data: {
object: {
name: '菜鸟教程',
url: 'http://www.runoob.com',
slogan: '学的不仅是技术，更是梦想！'
}
}
})
</script>
3. Ejemplo: use el segundo parámetro como el nombre de la clave
<div id="app">
<li v-for="(value,key) in person">{
{
key}}：{
{
value}}</li>
</div>
<script>
new Vue({
el: '#app',
data: {
person: {
name: "Tom",
age: 16,
sex: "男"
}
}
})
</script>
4. Ejemplo: usar el tercer parámetro como índice
<div id="app">
<li v-for="(value,key,index) in person">{
{
key}}：{
{
value}}--->{
{
index}}</li>
</div>
5. Ejemplo: bucle v-for para crear una lista de enteros
<div id="app">
<li v-for="num in 10">{
{
num}}</li>
</div>