Vue.js框架：v-前綴特殊屬性的基本用法（一）

一、簡單案例

　　1、引入Vue.js:

<script type="text/javascript" src="js/vue.js"></script>

　　2、在js中定義數據：

var vm=new Vue({
    el:'#test',
    data:{
        str:'Hello Vue!!!'
    }
})

　　3、在頁面展示數據：

<div id="test">
    <span>{{ str }}</span>    
</div>

　　4、運行截圖：

　　

 

二、v-if條件語句

　　vue中條件語句的用法，類似於java中的if-else-else_if的用法，加上v-即可。

　　1、代碼示例：

　　（1）js代碼：

var vm=new Vue({
    el:'#test',
    data:{
        str:'Vue'
    }
})

　　（2）頁面代碼：

<div id="test">
    <span v-if="str==='Bootstrap'">Bootstrap</span>
    <span v-else-if="str=='Vue'">Vue</span>
    <span v-else>Null</span>
</div>

　　2、結果截圖：

　　

 

三、v-for循環語句

　　1、數組元素循環：

　　（1）js代碼：

var vm=new Vue({
    el:'#test',
    data:{
        students:[
            {name:'張三'},
            {name:'李四'},
            {name:'王五'},
            {name:'趙六'}
        ]
    }
})

　　（2）頁面代碼：

<div id="test">
    <ul>
        <li v-for="student in students">
            {{ student.name }}
        </li>
    </ul>
</div>

　　（3）結果截圖：

　　

 

 　　2、對象屬性循環：

　　（1）一個參數：

　　js代碼：

var vm=new Vue({
    el:'#test',
    data:{
        student:{
            name:'張三',
            age:'18',
            sex:'男'
        }
    }
})

　　頁面代碼：

<div id="test">
    <ul>
        <li v-for="value in student">
            {{ value }}
        </li>
    </ul>
</div>

　　結果截圖：

　　

 

 　　（2）兩個參數：

　　js代碼與單個參數時相同，頁面代碼如下：

<div id="test">
    <ul>
        <li v-for="(value,key) in student">
            {{ key }}:{{ value }}
        </li>
    </ul>
</div>

　　結果截圖：

　　

 

 　　（3）三個參數：

　　js代碼與單個參數時相同，頁面代碼如下：

<div id="test">
    <ul>
        <li v-for="(value,key,index) in student">
            {{ index }}--{{ key }}:{{ value }}
        </li>
    </ul>
</div>

　　結果截圖：

　　

四、v-bind標簽屬性值

　　v-bind后面接某項屬性，並通過js中設定的值進行賦值：

　　1、js代碼：

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

　　2、css代碼：

.color
{
    color:blue;
}

　　3、頁面代碼：

<div id="test">
    <span v-bind:class="{'color':color}">v-bind</span>
</div>

　　4、結果截圖：

　　

 

　　注意：v-bind:class可以縮寫為:class

五、v-on觸發事件

　　在vue的methods中定義方法，並在v-on中進行調用，v-on后面接的是觸發方式：

　　1、js代碼：

var vm=new Vue({
    el:'#test',
    methods:{
        alertMessage:function(message)
        {
            alert(message);
        }
    }
})

　　2、頁面代碼：

<div id="test">
    <span v-on:click="alertMessage('v-on測試')">彈出提示信息！</span>
</div>

　　3、結果截圖：

 　　

 

六、v-model表單傳值

　　v-model將表單中的組件和vue中定義的值進行數據綁定：

　　1、js代碼：

var vm=new Vue({
    el:'#test',
    data:{
        message:''
    }
})

　　2、頁面代碼：

<div id="test">
    <input v-model="message" placeholder="請輸入用戶名···" />
    <br />
    <span>用戶名：{{ message }}</span>
</div>

　　3、結果截圖：

　　

 

　　后文：Vue.js框架：計算屬性computed的用法（二）