vue随笔3（v-for,v-on,v-model）

泡菜鱼丷

已于 2022-03-23 21:18:45 修改

阅读量1.3k

点赞数

分类专栏： Vue笔记文章标签： vue

于 2022-03-23 19:41:14 首次发布

本文链接：https://blog.csdn.net/weixin_57275829/article/details/123693169

版权

Vue笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

v-for：根据数据生成结构

v-for指令的作用是根据数据生成结构
数组经常和v-for结合使用
语法是 {item,index} in 数据
item和index可以结合其他指令一起使用
数组长度的更新会同步到页面上，是响应式的

<body>
    <div id="app">
        <ul>
            <!--普通数组-->
            <li v-for="(fruit,index) in  arr">
                {{index+1}}好吃的水果:{{fruit}}
                <!--索引从0开始，可以+1-->
            </li>
        </ul>
        <!--数据的变更-->
        <input type="button" value="添加水果" @click="add">
        <input type="button" value="减少水果" @click="remove">
        <!--对象数组-->
        <h2 v-for="item in Ffurit" v-bind:title="item.name">
            {{item.name}}
        </h2>

    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:["西瓜","苹果","香蕉","草莓","橘子"],
                Ffurit:[
                    {name:"芒果"},
                    {name:"蓝莓"},
                ]
            },
            methods:{
                add :function(){
                   this.Ffurit.push({name:"水蜜桃"});
                },
                remove:function(){
                    this.Ffurit.shift();
                }
            }
        })
    </script>
</body>

v-on补充

事件绑定的方法写成函数调用的形式，可以传入自定义参数
定义方法需要定义形参来接收传入的实参
事件的后面跟上，修饰符可以对事件进行限制
.enter可以限制触发的按键为回车
事件修饰符有多种

<body>
    <div id="app">
        <!--事件的绑定，且添加自定义参数-->
        <input type="button" value="点击" @click="doIt(123,'你好')">
        <!--事件修饰符，通过回车限制事件-->
        <input type="text" @keyup.enter="sayHi">
    </div>
    <script>
        var app = new Vue({
            el:"#app",
           methods:{
               doIt:function(p1){
                   console.log("这是一个补充");
                   console.log(p1);
                   console.log(p2)
               },
               sayHi:function(){
                   alert("你吃饭了吗");
               }
           }
        })
    </script>
</body>

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

v-model指令的作用是便捷的设置和获取表单元素的值
绑定的数据会和表单元素相关联
绑定的数据<-- -->表单元素的值（双向绑定）

<body>
    <div id="app">
        <!--检测修改message的值后，表单元素是否更新，更新时value会改变-->
        <input type="button" value="修改message的值" @click="setM">
        <!--通过keyup获取message的值，检测修改表单元素的值时，message是否改变-->
       <input type="text" v-model="message" @keyup.enter="getM">
       <!--v-text指令检测message的值是否同步更新-->
       <h2>{{message}}</h2>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
          data:{
           message:"这是一个值"
         },
          methods:{
              getM:function(){
                  alert(this.message);
              },
              setM:function(){
                  this.message="这是一个修改用的值"
              }
          }
        })
    </script>
</body>

泡菜鱼丷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue随笔3（v-for,v-on,v-model）

v-for：根据数据生成结构v-for指令的作用是根据数据生成结构数组经常和v-for结合使用语法是 {item,index} in 数据 item和index可以结合其他指令一起使用数组长度的更新会同步到页面上，是响应式的<body> <div id="app"> <ul>  <li v-for="(fruit,index) in a.
复制链接

扫一扫