vue基础入门（二）

最新推荐文章于 2024-07-07 23:10:31 发布

创造1024组合成员杨抄阅

最新推荐文章于 2024-07-07 23:10:31 发布

阅读量108

点赞数

文章标签： vue html

本文链接：https://blog.csdn.net/weixin_35969228/article/details/105923101

版权

一.修饰符：

阻止事务原本的行为，用自定义的方法执行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"> 
   <form action="save" v-on:submit.prevent="onSubmit">
       <input type="text" id="name" v-model="user.username"/>
       <button type="submit">保存</button>
   </form>
</div>

<script src="vue.min.js">
</script>

    <script>
        new Vue({
            el:'#app',
            data:{
                user:{} 
            },
            methods:{
                onSubmit(){
                     if(this.user.username){
                         console.log('提交表单');
                    }else{
                         alert('请输入用户名！')
                         }
                }
            }
        
        })
    </script>
</body>
</html>

点击保存之后不提交，而执行自定义的方法

二.条件指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"> 
       <input type="checkbox"  v-model="ok"/>是否同意
       <!-- 条件指令 -->
       <h1 v-if="ok">Vue</h1>
       <h1 v-else>ES6</h1>
</div>

<script src="vue.min.js">
</script>

    <script>
        new Vue({
            el:'#app',
            data:{
                ok:false
            },
      
        
        })
    </script>
</body>
</html>

三.循环v-for

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app"> 
   <table border="1">
       <tr v-for="user in userList">
           <td>{{user.id}}</td>
           <td>{{user.username}}</td>
           <td>{{user.age}}</td>
       </tr>
   </table>
</div>

<script src="vue.min.js">
</script>

    <script>
        new Vue({
            el:'#app',
            data:{
                userList: [

        { id: 1, username: 'helen', age: 18 },
        { id: 2, username: 'peter', age: 28 },
        { id: 3, username: 'andy', age: 38 }
    ]
            }
      
        
        })
    </script>
</body>
</html>

创造1024组合成员杨抄阅

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue基础入门（二）

一.修饰符：阻止事务原本的行为，用自定义的方法执行<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&gt...
复制链接

扫一扫