2.3-2.6 条件渲染，列表渲染，事件处理器，表单控件绑定

最新推荐文章于 2021-07-08 10:11:38 发布

Pluto-z

最新推荐文章于 2021-07-08 10:11:38 发布

阅读量118

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Zchzzzz/article/details/99999992

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

2.3 条件渲染

v-if
v-else-if
v-else

v-show 条件展示

 <h3> 条件渲染 - 单路分支 </h3>
<p v-if = "flag"> A </p>


<h3> 条件渲染 - 双路分支 </h3>
<p v-if = "flag"> A </p>
<p v-else > B </p>


<h3> 条件渲染 - 多路分支 </h3>
<p v-if = "type === '美食'"> 美食 </p>
<p v-else-if = " type === '游戏' "> 游戏 </p>
<p v-else> 睡觉 </p>

<h3> 条件展示 </h3>

<p v-show = " showFlag "> 条件展示 </p>

思考总结

思考： v-if  vs  v-show  
      1. 效果看起来一样
      2. why Vue要出两个相似的指令？
        v-if控制的是元素的存在与否
        v-show控制的是元素的display:none属性

思考？ 如果出事条件为假时？ v-if   v-show 谁的性能损耗较高？
v-show

总结： 项目中如何选择哪一个？
频繁切换用  v-show
如果不是很频繁的切换，那我们用 v-if

2.4 列表渲染

v-for 指令

<h3> 数组 </h3>
<ul>
    <li v-for = "(item,index) in arr" :key = " index ">
        {{ item }} -- index{{ index }}
    </li>
</ul>
<h3> 对象 </h3>
<ul>
    <li v-for = "(item,key,index) of obj" :key = "index">
        {{ item }} -- {{ key }} -- {{ index }}
    </li>
</ul>
<h3> json </h3>
<ul>
    <li v-for = "item in json" :key = "item.id">
        <span> 商品名称： {{ item.shop_name }} </span>
        <span> 商品价格： {{ item.price }} </span>
    </li>
</ul>

<h3> 循环嵌套 </h3>

<ul>
    <li v-for = "item in lists" :key = "item.id">
        <h3>  商品类型： {{ item.shop_name }} </h3>
        <ul>
            <li v-for = "item in item.type" :key = "item.id">
                <p> 制造商： {{ item.maker }} </p>
            </li>
            <!-- <li v-for = "ele in item.type" :key = "ele.id">
<p> 制造商： {{ ele.maker }} </p>
</li> -->
        </ul>
    </li>
</ul>

<h3> 循环number / string  </h3>

<p v-for = "item in 10"> {{ item }} </p>
<p v-for = "item in 'abc'"> {{ item }} </p>

总结：
- 1. 列表渲染参数可以写三个，分别为 item key index
- 1. 列表渲染，要在渲染的元素身上加一个key，作为这个元素唯一的标识 ,
    1. 思考: 这是为什么？
    2. 这个key最好是id,因为id唯一？思考：为什么不能是index
- 1. 循环嵌套式，参数名称是可以一致的
- 1. in / of 都可以使用

2.5 事件处理器

js中添加事件
        DOM 一级事件  on
            1.  on添加事件只书写一次
        
        DOM 二级事件  事件监听
            1.可以有多个
            2.事件监听有兼容 [ 现代浏览器 / IE低版本 ]
            addEventListener
        
        事件包含部分
            事件源： box
            事件类型： click
            事件处理程序： function(){}

        box.onclick=function(){}

        事件执行形式有两种：
            1.js执行
            2.html执行

        Vue选择了第二种作为事件添加的形式

<body>
    <div id="app">
        <button v-on:click = " fn "> 点击 </button>
        <button @click = ' fn '> 点击 </button>
        <button @click = ' eventHandler '> 事件对象 </button>
        <button @click = ' argumentHandler( $event,a,b ) '> 事件参数 </button>
    </div>

</body>
<script src="../lib/vue.js"></script>
<script>
    /*
        事件：
            事件对象： 事件对象记录了整个事件的信息
            事件参数： 
                形式参数： 定义函数时/方法时的参数
                实际参数： 调用函数/方法时传入的参数

            注意： 当一个事件处理程序有多个参数，其中一个参数是事件对象时，我们在调用这个方法时，要添加一个实际参数$event 与之对应
    */
    new Vue({
        el: '#app',
        data: {
            a: 10,
            b: 20
        },
        methods: {
            //methods 称之为方法 里面存储的是 事件处理程序
            fn () {
                alert('事件');
            },
            eventHandler ( e ) {
                console.log( e );
            },
            argumentHandler ( e,a,b ){
                //思考 ： 如果我想在这个方法中使用事件对象 怎么办？
                console.log( e );
                console.log( a + b );
            }
        },
    })
</script>

<body>
    <div id="app">
        <h3> 按键修饰符 </h3>
        <div class="big" @click.stop = 'big'>
            <div class="middle" @click.stop = 'middle'>
                <div class="small" @click.stop = 'small'></div>
            </div>
        </div>

        <h3> 键盘修饰符 </h3>
        <input type="text" @keyup.13 = 'getValue'>
        <input type="text" @keyup.enter = 'getValue'>
    </div>

</body>
<script src="../lib/vue.js"></script>
<script>
    /*
    Vue中对事件的功能的扩展
        * 修饰符 - 修饰事件
            * 按键修饰符
                - stop
                -self
                -once
                - ...
            *键盘修饰符
        
        自定义按键修饰符
        Vue.config.keyCodes.f1 = 112

    先以一个案例来讲述修饰符的好处
        - 事件冒泡
        - 回车弹出input的value
    */
    Vue.config.keyCodes.f1 = 112
    new Vue({
        el: '#app',
        methods: {
            big(e) {
                alert('  big ');
                // e.stopPropagation()
            },
            middle(e) {
                alert('  middle ');
                // e.stopPropagation()
            },
            smart(e) {
                alert('  smart ');
                // e.stopPropagation()
            },
            getValue(e) {
                // if ( e.keyCode === 13 ) {
                //   console.log('执行了')
                // }
                console.log('执行了')
            }
        },
    })
</script>

2.6 表单控件绑定

v-model
- 双向数据绑定
  - VM 改变 V随之改变
  - V改变， VM也随之改变
- v-model只用于表单
  - 理由： v-model默认绑定value属性
- 技巧：看到表单直接 v-model

<body>
    <div id="app">
        <input type="text" v-model = " msg ">
        <p> {{ msg }} </p>
    </div>
</body>
<script src="../lib/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: 'sb'
        }
    })
</script>

Pluto-z

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2.3-2.6 条件渲染，列表渲染，事件处理器，表单控件绑定

2.3 条件渲染v-ifv-else-ifv-elsev-show 条件展示 <h3> 条件渲染 - 单路分支 </h3><p v-if = "flag"> A </p><h3> 条件渲染 - 双路分支 </h3><p v-if = "flag"> A </p>&l...
复制链接

扫一扫

专栏目录