vue之day02 style和class 条件渲染列表渲染之购物车 v-for循环变量 key之解释和数组的检测与更新 v-model,input事件事件处理之事件修饰符

Jayxieming

已于 2022-10-25 21:33:32 修改

阅读量251

点赞数

文章标签： vue.js 前端 python

于 2022-10-25 21:31:03 首次发布

本文链接：https://blog.csdn.net/Yydsaoligei/article/details/127522230

版权

目录标题

一：style和class的使用

1.通过属性指令来控制class 和 style

2.class可以是：字符串，数组（用的多），对象

3.class的使用

推荐使用数组

    <style>
        .red{
            background-color: red;
            font-size: 40px;
        }

        .green{
            background-color: green;
            font-size: 80px;
        }

        .yellow{
            background-color: yellow;
        }
        .size{
            font-size: 100px;
        }

        .pink{
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="app">
        <button @click="handleClick">点我变化</button>
        <hr>
        <div :class="class_obj2">
            hahaha
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '.app',
        data: {
            class_obj: 'red',
            class_obj1: 'yellow size',
            class_arrary: ['yellow',],  // 数组
            class_obj2: {'pink': true, 'size': false}  // 对象
        },
        methods:{
            handleClick(){
                // this.class_obj='green'
                // 数组
                // this.class_arrary.push('size')
                // 对象
                this.class_obj2['size'] = true
            },
        }
    })
</script>

4.style的使用

可以是：字符串，数组，对象
推荐使用对象

<div :class="" :style="style_obj">
            hahaha
        </div>

<button @click="handleClick3">点我变色</button>

style_str:'font-size: 300px; background-color: chartreuse',
            style_array:[{'font-size': '90px'}, {'backgroundColor': 'green'}],
            style_obj: {'font-size': '30px', 'backgroundColor': 'yellow'}

 handleClick3(){
                // this.style_obj['backgroundColor'] = 'pink'
                this.style_obj['font-size'] = '100px'
                },

二：条件渲染

v-if
v-else-if
v-else

<body>
    <div class="app">
        <p v-if="score>90">优秀</p>
        <p v-else-if="score>60 && score<90">良好</p>
        <p v-else>不及格</p>
    </div>
</body>
<script>
    vm = new Vue({
        el: '.app',
        data: {
            score: 80,
        }
    })
</script>

三：列表渲染之购物车

for 循环
v-for='item in 数组/对象/数字'

四：v-for循环变量

可以循环：数字，字符串，数组，对象

<body>
    <div class="app">
        <div>
            <h1>数字</h1>
            <p v-for="item in num">{{item}}</p>
            <h1>字符串</h1>
            <p v-for="item in str">{{item}}</p>
            <h1>数组</h1>
            <p v-for="(item, index) in list1">第{{index}}个是：{{item}}</p>
            <h1>对象</h1>
            <p v-for="(value, key) in object">{{key}}:{{value}}</p>
        </div>

    </div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            num: 10,
            str: 'hello world ha ha ha',
            list1: [1,2,3,4,5,6],
            object: {name: 'zhao', age: 20}
        }
    })
</script>

五：key值解释和数组的检测与更新

1.如果要加key属性，一定要设置成唯一的

2.功能：提高页面刷新速度（提高虚拟dom的刷新速度）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>

</head>
<body>
<div id="app">

    <h1>数组的检测与更新</h1>
    <button @click="handleClick">点我追加女生</button>
    |
    <button @click="handleClick1">点我追加一批女生</button>|
    <button @click="handleClick4">点我修改数组页面变化</button>|
    <p v-for="girl in girls">{{girl}}</p>

    <h1>对象的检测与更新</h1>
    <button @click="handleClick2">点我追加身高</button>
    |
    <button @click="handleClick3">点我追加身高--解决</button>
    |
    <p v-for="(value,key) in obj">{{key}}---{{value}}</p>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            girls: ['刘亦菲', '迪丽热巴', '杨超越', '刘诗诗'],
            obj: {'name': 'lqz', age: 19}
        },
        methods: {
            handleClick() {
                this.girls.push('美女1号')
            },
            handleClick1() {
                var a = this.girls.concat(['美女99号', '美女88号', '美女77号'])
                console.log(a)
            },
            handleClick2() {
                this.obj.height = '180'  // 监控不到变化
                console.log(this.obj)
            },
            handleClick3() {
               Vue.set(this.obj,'height',180)  // 监控到变化了
            },
            handleClick4(){
                Vue.set(this.girls,0,'sdasdfas')
            }
        }
    })


</script>
</html>

3.数组的检测与更新

使用场景：我们用一些数组，对象的方法更新数据或对象的时候，发现页面没有变化，可以使用下面的两种方式

Vue.set(要改的值， key, value)

handleClick() {
    vm.$set(vm.obj, 'xx', 'uu')
    Vue.set(vm.obj, 'gender', '未知')
}

六：v-model,input事件，过滤案例

1.v-model

<div class="app">
        <h1>v-model</h1>
        <input type="text" v-model="name"> >>>>>>>>>>{{name}}

    </div>
</body>

<script>
    var vm = new Vue({
        el: '.app',
        data: {
            name: ''
        }
    })
</script>

2.input的事件

 # 只要输入就触发：input
 <p><input type="text" v-model="name1" @input="handleClick1">-------->{{name1}}</p>
 # 发生变化才触发：change
 <p><input type="text" v-model="name2" @change="handleClick2">-------->{{name2}}</p>
 # 贯标移走就会触发：blur
 <p><input type="text" v-model="name3" @blur="handleClick3">-------->{{name3}}</p>

过滤案例

<body>
    <div class="app">
        <h1>过滤案例</h1>
        <p><input type="text" v-model="myText" @input="handleClick"></p>
        <hr>
        <p v-for="item in newList">{{item}}</p>
    </div>
</body>
<script>
    var vm = new Vue({
        el: '.app',
        data: {
            myText: '',
            dataList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf'],
            newList: ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
        },
        methods: {
            handleClick(){
                var _this=this
                this.newList=this.dataList.filter(item =>{
                    // if(item.indexOf(_this.myText)>=0){
                    //     return true
                    // }else {
                    //     return false
                    // }

                    // 方法2
                    return item.indexOf(this.myText) >= 0
                })
            }
        }
    })
</script>

    // 数组的过滤方法
    var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    var ll = l.filter(function (item) {
        return false  
    })
    
    // 判断子字符串是否在字符串中  大于等于0表示在
    var name='qq'
    var s='hahah qq is '
    var res=s.indexOf(name)
    console.log(res)

    // 箭头函数
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll = l.filter(item => {
    //     return false
    // })

七：事件处理之事件修饰符

修饰符	功能
.stop	只处理自己的事件，阻止冒泡事件的发生
.self	只处理自己的事件，子控冒泡事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）