Vue的语法2

4、修饰符

修饰符 (Modifiers) 是以半角句号（.）指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
即阻止事件原本的默认行为
<body>
    <div id="app">
        <form action="save" v-on:submit.prevent="onSubmit">
            <input type="text" id="name" v-model="user.username"></input>
            <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>

5、条件渲染

  <div id="app">
        <input type="checkbox"  v-model="ok">是否同意</input>
        <h1 v-if="ok">王Big丽</h1>
        <h1 v-else>王Small丽</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>

6、列表渲染

<div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>
        <ol>
            <li v-for="(n,index) in 10">{{n}}--{{index}}</li>
        </ol>
        <hr>
    </hr>
        <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:'zhengxinran',age:3},
                    {id:2,username:'wangxiaoli',age:35},
                    {id:3,username:'zhengdong',age:38},
                ]
            }
        })
    </script>

 

posted @ 2021-11-24 17:40  关陈七  阅读(39)  评论(0)    收藏  举报