vue指令2

最新推荐文章于 2021-09-22 00:20:47 发布

Zany555

最新推荐文章于 2021-09-22 00:20:47 发布

阅读量87

点赞数

分类专栏： VUE 学习文章标签： vue

本文链接：https://blog.csdn.net/qq_45399980/article/details/116563663

版权

学习同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

VUE

4 篇文章 0 订阅

订阅专栏

vue指令2

vue指令2
实例：记事本

vue指令2

v-for

根据数据生成列表结构

v-on补充

传递自定义参数，事件修饰符（https://cn.vuejs.org/v2/api/#v-on）

v-model

获取和设置表单元素的值（双向数据绑定）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <!-- v-for -->
    <div id="app">
        <ul>
            <li v-for="(item,index) in arr">
                {{item}}-{{index}}
            </li>
        </ul>
        <input type="button" value="添加数据" @click="add">
        <input type="button" value="移除数据" @click="remove">
        <h2 v-for="item in arrname" :title="item.name">
            {{item.name}}
        </h2>
    </div>
    <hr>
    <!-- v-on补充 -->
    <div id="app2">
        <input type="button"  value="点击" @click="doIt(555,'zany')">
        <input type="text" @keyup.enter="sayhi">
    </div>
    <hr>
    <!-- v-model -->
    <div id="app3">
        <input type="text" v-model="message" @keyup.enter="getM">
        <h2>{{message}}</h2>
        <input type="button" @click="setm" value="修改文本框的值为zany">
    </div>
</body>
<script>
    // v-for
    var app=new Vue({
        el:"#app",
        data:{
            arr:[1,2,3,4,5],
            arrname:[
                {name:"小明"},
                {name:"小红"},
                {name:"小刚"}
            ]
        },
        methods:{
            add:function(){
                this.arrname.push({name:"小王"})
            },
            remove:function(){
                this.arrname.shift();
            },
            
        },
    })
    // v-on补充
    var app2=new Vue({
        el:"#app2",
        methods:{
            doIt:function(p1,p2){
                console.log("doit");
                console.log(p1);
                console.log(p2);
            },
            sayhi:function(){
                alert("吃了嘛");
            },
        },
    })
    // v-model
    var app3=new Vue({
        el:"#app3",
        data:{
            message:"啦啦啦"
        },
        methods:{
            getM:function(){
                alert(this.message);
            },
            setm:function(){
                this.message="zany"
            },
        }
    })
</script>
</html>

实例：记事本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记事本</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
    <div id="app">
        <!-- v-model:双向绑定输出数据
        @keyup.enter：回车添加输入数据
        placeholder：设置文本框为空时的提示 -->
        <input type="text" v-model="print" @keyup.enter="add()" placeholder="请输入任务">
        <ul>
            <!-- v-for：获取表单list中的数据 -->
            <li v-for="(item,index) in list">
                <div>
                    <span>{{index+1}}.</span>
                    <label>{{item}}</label>
                    <!-- @click：绑定点击删除事件del（）传递参数index -->
                    <input type="button" value="×" @click="del(index)" >
                </div>
            </li>
            <!-- v-text：设置标签文本
            v-show：当list清空后隐藏控件 -->
            <label v-text="'一共'+list.length+'item left'" v-show="list.length!=0"></label>
            <!-- @click：设置点击清空事件clear（）
            v-if：当list清空后隐藏控件 -->
            <button @click="clear()" v-if="list.length!=0">Clear</button>
        </ul>
    </div>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                list:["吃饭","睡觉","打代码"],
                //设置文本框输入的值，可以为空
                print:""
            },
            methods:{
                //添加
                add:function(){
                    this.list.push(this.print);
                },
                //删除
                del:function(index){
                    // console.log("del");
                    // console.log(index);
                    //splice删除(第几个，删几个)
                    this.list.splice(index,1);
                },
                //清空
                clear:function(){
                    this.list=[];
                }
            }
        })
    </script>
</body>
</html>

在这里插入图片描述

Zany555

关注

0
点赞
踩
0

收藏

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

vue指令2vue指令2v-forv-on补充v-model实例：记事本vue指令2v-for根据数据生成列表结构v-on补充传递自定义参数，事件修饰符（https://cn.vuejs.org/v2/api/#v-on）v-model获取和设置表单元素的值（双向数据绑定）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h
复制链接

扫一扫

专栏目录