4.29_Vue学习入门第二篇

最新推荐文章于 2022-10-17 14:36:25 发布

笔描相思

最新推荐文章于 2022-10-17 14:36:25 发布

阅读量147

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_44788119/article/details/105835985

版权

学习专栏收录该内容

95 篇文章 0 订阅

订阅专栏

1:图片切换案例

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
    <style>
        .active{
            border: 1px solid red;
        }
    </style>
</head>
<!--/*vue的作用范围是在而来*/-->
<body>
<div id="app">
    <!--    插值表达式-->
    <a href="javascript:void(0)" v-show="index!=0" @click="prev" ><</a>
   <img v-bind:src="inmage[index]" style="    width: 1000px;
    height: 500px;">
    <a href="javascript:void(0)" v-show="index<inmage.length-1" @click="next">
        >
    </a>
    <br>

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
          inmage:["pic/timg.png","pic/timg1.png","pic/timg2.png","pic/timg4.png","pic/timg5.png"],
            index:0
        }
        ,
        methods:{
           prev:function () {
               this.index--;
           },
            next:function () {
              this.index++;
            }
        }

    })
</script>
</body>
</html>

2:v-for
在这里插入图片描述
代码:

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<!--/*vue的作用范围是在而来*/-->
<body>
<div id="app">
    <input type="button" @click="add" value="添加"><input type="button" @click="amove" value="删除">
    <ul v-for="(it,index) in inm" >
        <li>{{index+1}}黑马程序员学校:{{it}}</li>
    </ul>
    <div v-for="(ie,index) in vage" :title="ie.name">
        <h2>
      {{ie.name}}
        </h2>
    </div>



<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
         inm:["北京","上海","广州","深圳"],
            vage:[{name:"西兰花炒蛋"}, {name:"蛋炒西兰花"}]
        }
        ,
        methods:{
          add:function () {
              // 添加
               this.vage.push({name:"水煮鱼"});
           },
            amove:function () {
              // 删除
              this.vage.shift();
            }
        }

    })
</script>
</body>
</html>

运行结果:
在这里插入图片描述

3:v-on补充

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<!--/*vue的作用范围是在而来*/-->
<body>
<div id="app">
<!--单击弹出"666"和"女孩"-->
    <input type="button" @click="add(666,'女孩')" value="单击">
<!--    按回车的时候弹出"你好啊"-->
<input type="text" @keyup.enter="amove">

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
         inm:["北京","上海","广州","深圳"],
            vage:[{name:"西兰花炒蛋"}, {name:"蛋炒西兰花"}]
        }
        ,
        methods:{
          add:function (p1,p2) {
            alert(p1);
            alert(p2);

           },
            amove:function () {
              alert("你好啊");
            }
        }

    })
</script>
</body>
</html>

在这里插入图片描述
4:v-model

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>vue入门</title>
</head>
<!--/*vue的作用范围是在而来*/-->
<body>
<div id="app">
    <input type="button" value="按钮" @click="amove">
    <input type="text" v-model="inm" @keyup.enter="add">
    <h2>
        {{inm}}
    </h2>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app=new Vue({
        el:'#app',
        data:{
         inm:"黑马"

        }
        ,
        methods:{
          add:function () {
           alert(this.inm);
           },
            amove:function () {
             this.inm="女孩",
                 alert(this.inm)
            }
        }

    })
</script>
</body>
</html>