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的用法（二）