Vue的简单指令

最新推荐文章于 2024-09-15 16:53:19 发布

原创最新推荐文章于 2024-09-15 16:53:19 发布 · 694 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Vue指令

Vue.js 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Vue.js中v-for指令的使用方法，包括基本语法、列表渲染示例及如何在数组末尾添加元素等内容。

v-if 根据表达式的值的真假条件渲染元素
v-for 列表渲染，绑定数据到数组渲染成一个列表
@click 是v-on:click的简写，绑定事件监听
v-model 在表单控件输入和应用状态中做双向数据绑定
v-bind 在变量与属性值直接的数据绑定

重点说一下v-for:

1.用法：用于列表的编写，绑定数据到数组来渲染一个列表，譬如ul,ol等等

2.源码：

<div id="app-4">
    <ol>
	<li v-for="x in list1">
	    {{x}}
	</li>
    </ol>
    <ul>
        <li v-for="x in list2">
            {{x.name}}
        </li>
    </ul>
</div>

var app4=new Vue({
    el:'#app-4',
    data:{
        list1:['Alice','Charles','Mills','Marry'],
        list2:[
            {name:'One'},
            {name:'Two'},
            {name:'Three'}
        ]
    }
})

3.如何在数组末尾增加一个元素：在控制台中输入：app4.list1.push('Hello')和app4.list2.push({name:'Four'})