vue.js 常用指令 v-if、v-bind、v-for、v-on、v-model等用法

v-for指令

<li v-for="li in lis" > <!-- "v-for"渲染lis -->
    {{ li.test }}
</li>

其中{{ li.text }}与jsp中的jstl标签相类似
这里写图片描述

js:
这里写图片描述

 new Vue({
    el:hello,
    data:{
        lis:[
            {text:"Lucy"},
            {text:"Jack"},
            {text:"Tom"}
        ]
    }
});

先进行数据绑定到myDiv标签,然后在date中定义lis数组
运行后页面:
这里写图片描述

2.v-on的使用

用于监听DOM事件,v-on可以简写为@
这里写图片描述

这里写图片描述
运行结果为:
这里写图片描述

3.v-if的使用

条件判断指令,根据v_if中的表达式传出的布尔值,如果为true则显示标签内容
<div>
    <P>{{ sayHello }}</p>
    <b v-if="ok">{{ sayHi }}</b>
</div>

js:
这里写图片描述

阅读更多
换一批

没有更多推荐了,返回首页