Vue.js案例驱动

最新推荐文章于 2024-05-16 13:30:42 发布

听~宇

最新推荐文章于 2024-05-16 13:30:42 发布

阅读量65

点赞数

分类专栏：其他文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/qq_47518713/article/details/125035026

版权

其他专栏收录该内容

4 篇文章 0 订阅

订阅专栏

el：挂载点：不能挂载到html body 其它标签可以，通常挂载到div标签

仔细的人就会发现其实他就是json格式

三目运算符，里面还可以进行运算及判断

v-事件

这是js的点击写法

两种方式v-或者@

计数器

键盘事件

鼠标移入事件：两种方式

阻止表单事件

那怎么阻止它呢

v-bind

v-model

循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>循环</title>
    <script src="js/vuejs-2.5.16.js"></script>
</head>
<body>
    <div id="kkk">
        <ul>
            <li v-for="i in nums">{{i}}</li>
            <li v-for="(i,index) in nums">{{i}}下标为{{index}}</li>
            <li v-for="(key,value) in user">{{key}}==={{value}}</li>
        </ul>
        <table width="50%" cellspacing="0" cellpadding="0" border="1">
            <tr>
                <td>id</td>
                <td>name</td>
            </tr>
            <tr v-for="(u,index) in users">
                <td>{{u.id}}</td>
                <td>{{u.name}}</td>
            </tr>
        </table>
    </div>
    <script>
        new Vue({
            el:"#kkk",
            data:{
                nums:[100,200,300,400],
                user:{
                    id:100,
                    name:"好人"
                },
                users:[
                    {id:100,name:"好人1"},
                    {id:101,name:"张三"},
                    {id:102,name:"李四"},
                    {id:103,name:"王五"}
                ]
            }
        })
    </script>
</body>
</html>

if 和show

听~宇

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js案例驱动

el：挂载点：不能挂载到html body 其它标签可以，通常挂载到div标签仔细的人就会发现其实他就是json格式三目运算符，里面还可以进行运算及判断v-事件这是js的点击写法两种方式v-或者@计数器键盘事件鼠标移入事件：两种方式阻止表单事件那怎么阻止它呢v-bind...
复制链接

扫一扫