2.6

学习vue中的computed计算属性,v-model的一些特殊用法还有watch监听器

今日代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day02</title>
    <!-- @keyup.enter  键盘回车监听-->
    <!-- v-model.trim 去除首尾空格 -->
    <!-- v-model.num 转数字 -->
    <!-- @事件名.stop  阻止冒泡 -->
    <!-- @事件名.prevent 阻止默认行为 -->

    <!-- 操作class -->
    <!-- 
        <div class="box" :class="{类名1: 布尔值, 类名2: 布尔值}"></div> 控制css样式
        <div class="box" :class="[类名1 ,  类名2]"></div>
     -->

     <!-- 操作style -->
     <!-- 
        <div class="box" :style="{CSS属性名1: CSS属性值,CSS属性名2:CSS属性名2}"></div>
      -->

      <!-- 计算属性算出来会存入缓存,如果依赖项没改变就直接读缓存,性能高 -->

      <!-- watch监听器 -->
      <!-- 简单写法
        watch:{
                //该方法会在数据变化时,触发执行
                数据属性名(newValue,oldValue){
                    一些业务逻辑或异步操作
                },
                '对象.属性名'(newValue,oldValue){
                    一些业务逻辑或异步操作
                },
            }
       -->
       <!-- 完整写法
        
        watch{
            数据属性名:{
                    deep:true,  //对对象的所有属性进行监视
                    immediate:true, //是否立刻执行一次handler
                    handler(newValue){
                        console.log(newValue);
                    }
                }
        }
        -->
</head>
<body>
    <div id="bbb">
        <h3>@事件名.stop</h3>
        <div @click="fatherFn">
            <div @click.stop="sonFn">儿子</div>
        </div>

        <h3>@事件名.prevent</h3>
        <a @click.prevent href="https://baidu.com">百度</a>


        <select v-model="cityID">
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">广州</option>
            <option value="4">深圳</option>
            <option value="5">重庆</option>
        </select>


        <br>
        <span>计算属性{{totalCount}}</span>
    </div>
    <script  src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        const bbb=new Vue({
            el:'#bbb',
            data:{
                cityID:1,
                list:[
                    {id: 1, name:"篮球",num:3},
                    {id: 2, name:"篮球",num:8},
                    {id: 3, name:"篮球",num:4},
                ]
            },
            methods:{
                fatherFn(){
                    alert('father');
                },
                sonFn(){
                    alert('son');
                }
            },
            computed:{
                totalCount(){
                    return this.list.reduce((sum,item)=> sum+ item.num,0);
                }

            },
            watch:{
                //该方法会在数据变化时,触发执行
                // 数据属性名(newValue,oldValue){
                //     一些业务逻辑或异步操作
                // },
                // '对象.属性名'(newValue,oldValue){
                //     一些业务逻辑或异步操作
                // },
                
            }

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

 

posted on 2024-02-06 20:38  Daniel350  阅读(144)  评论(0)    收藏  举报