vue常用指令

最新推荐文章于 2024-01-04 20:52:45 发布

娜小鈊

最新推荐文章于 2024-01-04 20:52:45 发布

阅读量169

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/weixin_39366606/article/details/100783021

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

v-model

双向数据绑定

一般用于表单元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-model</title>
    <script type="text/javascript" charset="utf-8" src="../js/vue.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            new Vue({
                el:".itany",
                data:{
                    name:"",
                    age:18,
                    flag:true,
                    user:{id:"111",name:"aaaa"}
                }
            });
        }
    </script>
</head>
<body>
    <div class="itany">
        用户名：<input type="text" v-model="name"/>
        <br>
        {{name}}<br>
        {{age}}<br>
        {{flag}}<br>
        {{user}}<br>
        {{user.id}}<br>
        {{user.name}}<br>
    </div>
</body>
</html>

v-for

对数组或对象进行循环操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-for</title>
    <script type="text/javascript" charset="utf-8" src="../js/vue.js"></script>
    <script type="text/javascript">
        window.onload=function () {
            new Vue({
                el:"#itany",
                data:{
                    arr:[12,4,89,5,3,95,8],
                    user:{id:"1231",name:"saaaa",age:18},
                    arr2:[12,4,89,5,3,95,8,12],
                    users:[
                        {id:"1231",name:"saaaa",age:18},
                        {id:"1232",name:"sbbbb",age:19},
                        {id:"1233",name:"scccc",age:17}],
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        {{arr}}<br>
        <!--普通循环-->
        <ul>
            <li v-for="value in arr">{{value}}</li>
        </ul>
        <ul>
            <li v-for="value in user">{{value}}</li>
        </ul>
        <!--键值循环-->
        <ul>
            <li v-for="(value,index) in arr">{{value}}----------{{index+1}}</li>
        </ul>
        <ul>
            <li v-for="(value,index) in user">{{value}}----------{{index}}</li>
        </ul>
        <!--可以直接循环包含重复数据的集合-->
        <!--:key  可以通过指定:key属性绑定唯一key，
            当更新元素时可重用元素，提高效率-->
        <ul>
            <li v-for="(value,index) in arr2" :key="index">{{value}}</li>
        </ul>
        <!--循环对象数组，添加索引-->
        <ul>
            <li v-for="(user,index) in users">
                {{index+1}}:{{user.id}}----{{user.name}}-----{{user.age}}
            </li>
        </ul>
    </div>
</body>
</html>

v-on

用来绑定事件

用法：v-on:事件="函数"

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-on</title>
    <script type="text/javascript" src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload=function () {
            new Vue({
                el:"#itany",
                data:{
                    arr:[12,34,12,22]
                },
                methods:{//定义方法
                    click:function () {
                        console.log("click-info");
                    },
                    add(){
                        /*this表示当前的vue实例*/
                        this.arr.push(666);
                        this.click();
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="itany">
        <!--没有参数，可以不加小括号-->
        <button v-on:click="click()">CLICK</button>
        <button v-on:click="add()">ADD</button>
        <br>
        {{arr}}
        <br>
        <button v-on:mouseover="click">mouseover</button>
        <button v-on:dblclick="click">dblclick</button>
    </div>
</body>
</html>

v-show/v-if

用来显示或隐藏元素

v-show是通过display实现

v-if是每次删除后再重新创建

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>v-show/v-if</title>
    <script type="text/javascript" src="../js/vue.js" charset="utf-8"></script>
    <script type="text/javascript">
        window.onload=function () {
            new Vue({
                el:"#itany",
                data:{
                    flag:true,
                },
                methods:{
                    change(){
                        this.flag = false;
                    }
                }
            })
        }
    </script>
</head>
<body>
    <div id="itany">
        <button v-on:click="change()">HIDE</button>
        <hr>
        <button v-on:click="flag=false">HIDE</button>
        <hr>
        <button v-on:click="flag=!flag">HIDE/SHOW</button>
        <hr>
        <div style="width: 100px;height: 100px; background-color: lightpink" v-show="flag">
            AAAAAAAA
        </div>
    </div>
</body>
</html>

娜小鈊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue常用指令

v-model双向数据绑定一般用于表单元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>v-model</title> <script type="text/javascript" char...
复制链接

扫一扫