Vue.js 条件与循环

标签：rip   属性   else   efault   绑定   als   splay   条件判断   元素   

1.v-bind

v-bind 为标签属性绑定一个变量，语法：v-bind:title="val"
(1)可以缩写成 :title="val"
(2)v-bind绑定的属性值将被解析成变量，而不是字符串

<p title="msg">我是p标签</p>
<h5 v-bind :title="msg">我是h5标签</h5>
<!-- 缩写 -->
<h5 :title="msg">我是h5标签</h5>

<script>
export default {
    data(){
        return{
            msg:"hello world",
        }
    }
}
</script>

渲染结果：

<p title="msg">我是p标签</p>
<h5 title="hello world">我是h5标签</h5>
<h5 title="hello world">我是h5标签</h5>

2.v-if/v-else 条件判断

根据v-if属性的值为来决定是否渲染该标签元素。
如果为true，则渲染此标签
如果为false，则移除此标签

<div id="app">
    <h5 v-if="seen">seen为true则显示此标签</h5>
    <h5 v-else>seen为false则显示此标签</h5>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        seen: true
    }        
})

3.v-show

v-show的用法与v-if一致，区别在于v-show只是控制css的display属性来决定当前元素的隐藏/显示

<!-- 无论ok的值时false还是true，该h1元素都存在于dom中 -->
<h1 v-show="ok">Hello!</h1>

4.v-for 循环

语法：v-for="(val,index) in list"
(1)当循环数组时，2个参数分别对应的是val和index
(2)当循环对象时，2个参数分别对应的是val和key
(3)需要为每个循环项绑定一个key属性
(4)可以迭代整数

<template>
    <div>
        <h1>我是App组件</h1>
        <ul>
            <li v-for="val in list" :key="val">{{val}}</li>
        </ul>
        <ul>
            <!-- 添加下标 -->
            <li v-for="(val,index) in list" :key="index">{{index}} - {{val}}</li>
        </ul>
        <ul>
            <!-- 循环对象 -->
            <li v-for="val in person" :key="val">{{val}}</li>
        </ul>
        <ul>
            <!-- 添加key -->
            <li v-for="(val,key) in person" :key="key">{{key}} - {{val}}</li>
        </ul>
        <ul>
            <!-- 迭代整数 -->
            <li v-for="(val,index) in 5" :key="index">{{index}} - {{val}}</li>
        </ul>
    </div>
</template>

Vue.js 条件与循环

标签：rip   属性   else   efault   绑定   als   splay   条件判断   元素   

原文地址：https://www.cnblogs.com/OrochiZ-/p/11717035.html