tnblog
首页
视频
资源
登录

vue.js几个简单的指令v-bind,v-for,v-model,v-if

3291人阅读 2021/11/26 14:13 总访问:555241 评论:0 收藏:0 手机
分类: 前端

v-bind:你需要绑定的属性名称,可以简写,:属性名称

<td v-bind:vl="item.Id">{{item.Id}}</td>
<td :vl="item.Id">{{item.UserName}}</td>

v-model:给input绑定model

<div id="app-6">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
    var app6 = new Vue({
        el: '#app-6',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>

v-for:循环指令

<div id="content">
    <table>
        <tr v-for="item in userinfo">
            <td v-bind:vl="item.Id">{{item.Id}}</td>
            <td :vl="item.Id">{{item.UserName}}</td>
            <td>{{item.Number}}</td>
            <td>{{item.UserClass}}</td>
            <td><a href="#" @@click="handlerRemove">删除</a></td>
        </tr>
    </table>
</div>

v-if:条件判断,做显示隐藏等等

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>
<script>
    var app = new Vue({
        el: "#app-3",
        data: {
            seen: false
        }
    })
</script>

用作判断:

<td v-bind:checktype="item.CheckType">
    <span v-if="item.CheckType==1" class="label label-success">审核成功</span>
    <span v-else-if="item.CheckType==2" class="label label-info">正在审核</span>
    <span v-else class="label label-danger">审核失败</span>
</td>

v-on:事件名称="事件处理的方法,在methods写" 可以简写


欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739

评价
这一生多幸运赶上过你.
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2024TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
欢迎加群交流技术