Vue 02——style、class、条件、v-for、事件处理

目录

style和class的使用

属性指令控制style和class

# class 可以等于 ：字符串，数组（用的多），对象
# style 可以等于 ：字符串，数组，对象（用的多）


data: {
    # class_str: 'red size1',
    class_array: ['green', 'size2'],
    # class_obj: {'red': true, 'size1': false},

    # style_str: 'font-size: 60px;background-color: deepskyblue',
    # style_array: [{'font-size': '90px'}, {'background-color': 'palegoldenrod'}],
    style_obj: {'font-size': '70px', backgroundColor: 'aliceblue'}
     },
methods: {
    clickMe(){
        this.class_str = 'red'              // 字符串修改
        this.class_array.push('size1')      // 数组追加
        this.class_obj['size1'] = true      // 对象   k v

        this.style_str = 'font-size: 40px;background-color: orange'    // 字符串修改
        this.style_array.push({'font-weight': 'bolder'})    // 数组追加
        this.style_obj['font-size'] = '100px'   // 对象   k v    
       }
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>

    <script src="js/vue.js"></script>

    <style>
        .red{
            background-color: red;
        }
        .green{
            background: greenyellow;
        }

        .size1{
            font-size: 50px;
        }
        .size2{
            font-size: 100px;
        }


    </style>


</head>
<body>
    <div id="app">
        <div :class="class_str">
            喜羊羊
        </div>
        <div :class="class_array">
            美羊羊
        </div>
        <div :class="class_obj">
            灰太狼
        </div>
        <br>
        <br>
        <br>
        <br>
        <br>
        <div :style="style_str">
            ( •̀ ω •́ )y
        </div>
        <div :style="style_array">
            (⊙o⊙)？
        </div>
        <div :style="style_obj">
            ( •̀ ω •́ )y
        </div>

        <button @click="clickMe" class="btn btn-danger">点我变色儿</button>
    </div>
</body>


<script>
    var vm = new Vue({
        el: '#app',
        data: {
            class_str: 'red size1',
            class_array: ['green', 'size2'],
            class_obj: {'red': true, 'size1': false},

            style_str: 'font-size: 60px;background-color: deepskyblue',
            style_array: [{'font-size': '90px'}, {'background-color': 'palegoldenrod'}],
            style_obj: {'font-size': '70px', backgroundColor: 'aliceblue'}
        },
        methods: {
            clickMe(){
                this.class_str = 'red'              // 字符串修改
                this.class_array.push('size1')      // 数组追加
                this.class_obj['size1'] = true      // 对象   k v

                this.style_str = 'font-size: 40px;background-color: orange'    // 字符串修改
                this.style_array.push({'font-weight': 'bolder'})    // 数组追加
                this.style_obj['font-size'] = '100px'   // 对象   k v
    
            }
        }
    })
</script>
</html>

条件渲染

# v-if  v-else-if  v-else
<div id="app">
    您的成绩是：
    <p v-if="score>90">优秀</p>
    <p v-else-if="score>60">良好</p>
    <p v-else>不及格</p>
</div>
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/vue.js"></script>
    <style>

    </style>
</head>
<body>
<div id="app">
    您的成绩是：
    <p v-if="score>90">优秀</p>
    <p v-else-if="score>60">良好</p>
    <p v-else>不及格</p>

</div>
</body>
<script>
    var vm=new Vue({
        el: '#app',
        data: {
            score:80
        },
    })
</script>
</html>

列表渲染之购物车显示不显示

# for 循环  --->   v-for='item in 数组/对象/数字'
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>购物车</h1>
            <button @click="handleClick" class="btn btn-danger">点击模拟加载数据</button>
            <div v-if="good_list.length>0">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>商品名</th>
                        <th>商品价格</th>
                        <th>商品数量</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in good_list">
                        <td>{{item.name}}</td>
                        <td>{{item.price}}</td>
                        <td>{{item.count}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div v-else style="margin-top: 30px">
                购物车空空如也
            </div>
        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            good_list: []
        },
        methods: {
            handleClick() {
                this.good_list = [
                    {name: '跑车', count: 2, price: 888888},
                    {name: '面包', count: 5, price: 3},
                    {name: '钢笔', count: 7, price: 8},
                    {name: '铅笔', count: 6, price: 2}
                ]
            }
        }
    })


</script>
</html>

v-for遍历数字，数组，对象

# v-for 可以循环什么？
    数字
    字符串
    数组
    对象

<p v-for="item in number">数字：{{item}}</p>    # 从0开始

<p v-for="item in name">字符串循环：{{item}}</p>  

<p v-for="(item,index) in good_list">数组循环：第{{index}}个是{{item}}</p>   
# 可传三个参数 1.数组当前项的值，2.数组当前项的索引，3.数组对象本身。
# 如果只传入一个参数，则默认是数组当前项

<p v-for="(value,key) in obj">对象循环：key值是：{{key}},value值是：{{value}}</p>
# 循环key和value，第二个变量是key
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>循环变量之数字</h1>
            <p v-for="item in number">数字：{{item}}</p>
            <h1>循环变量之字符串</h1>
            <p v-for="item in name">字符串循环：{{item}}</p>
            <h1>循环变量之数组--》注意循环时，索引是第二个变量</h1>
            <p v-for="(item,index) in good_list">数组循环：第{{index}}个是{{item}}</p>

            <h1>循环变量之对象---》循环key和value，第二个变量是key</h1>
            <p v-for="(value,key) in obj">对象循环：key值是：{{key}},value值是：{{value}}</p>

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 数字
            number:10,
            // 字符串
            name:'lqz is handsome',
            //数组
            good_list: [
                    {name: '跑车', count: 2, price: 888888},
                    {name: '面包', count: 5, price: 3},
                    {name: '钢笔', count: 7, price: 8},
                    {name: '铅笔', count: 6, price: 2}
                ],
            // 对象
            obj:{name:'lqz',age:19,gender:'男'}
        },
    })


</script>
</html>

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

v-for 循环，key值的解释

# 别人写v-for循环，在标签内部会有一个key属性：
    -element-ui：饿了么团队开源的vue的ui组件库  
    -<el-carousel-item v-for="item in 4" :key="item">
    vue中使用的是虚拟DOM，会和原生的DOM进行比较，然后进行数据的更新，提高数据的刷新速度（虚拟DOM用了diff算法）
    在v-for循环数组、对象时，建议在控件/组件/标签写1个key属性，【属性值唯一】
    页面更新之后，会加速DOM的替换（渲染）
    :key="变量"
# 提高页面刷新速度

# 如果要加key属性，一定要设置成唯一的
# 要么干脆不加

数组的检测与更新

#  有时候，我们用一些数组，对象的方法更新数组或对象时，发现页面没有变化
#使用如下方式更新即可
    
    
handleClick5() {
                // vm.$set(vm.obj,'xx','uu')   这个可以
                Vue.set(vm.obj, 'gender', '未知')
                alert('ss')
            }

事件处理之过滤案例

# input 标签的事件
    -change  ：只要内容发生变化，就会触发
    -blur   ：失去焦点，会触发
    -input  ：只要输入内容，就触发


input事件：<input type="text" v-model="name1" @input="handleInput"> --->{{name1}}

change事件：<input type="text" v-model="name2" @change="handleChange"> --->{{name2}}

blur事件：<input type="text" v-model="name3" @blur="handleBlur"> --->{{name3}}
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>v-model</h1>
            用户名1--input事件：<input type="text" v-model="name1" @input="handleInput"> --->{{name1}}
            <br>
            用户名2--change事件：<input type="text" v-model="name2" @change="handleChange"> --->{{name2}}
            <br>
            用户名3--blur事件：<input type="text" v-model="name3" @blur="handleBlur"> --->{{name3}}

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name1: '',
            name2: '',
            name3: ''
        },
        methods:{
            handleInput(){
                console.log(this.name1)
            },
            handleChange(){
                console.log(this.name2)
            },
            handleBlur(){
                console.log(this.name3)
            }


        }
    })


</script>
</html>

事件处理之事件修饰符

#  修饰事件
.stop	只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡）
.self	只处理自己的事件，子控件冒泡的事件不处理
.prevent	阻止a链接的跳转
.once	事件只会触发一次（适用于抽奖页面）
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>事件修饰符</h1>
            <ul @click.self="handleUl">
                <li @click="handelLi">第一行</li>
                <li>第二行</li>
            </ul>

            <hr>
            <a href="http://www.baidu.com" @click.prevent="handlePrevent">点我看美女</a>
            <hr>
            <button @click.once="handleOnce">秒杀</button>

        </div>


    </div>


</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handelLi() {
                alert('li被点了')
            },
            handleUl() {
                alert('ul被点了')
            },
            handlePrevent(){
                console.log('a标签被点了，不跳转')
                // 跳转
                location.href='http://www.cnblogs.com'
            },
            handleOnce(){
                console.log('秒到了')
            }

        }
    })


    // 补充1：数组的过滤方法
    // var l =['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll=l.filter(function (item){
    //
    //     return false
    // })
    // console.log(ll)


    // 补充2：判断子字符串是否在字符串中    大于等于0，表示子字符串在字符串中
    // var name='qq'
    // var s='lqz is nb'
    // var res=s.indexOf(name)
    // console.log(res)


    // 补充3 ，es6的箭头函数
    // var l = ['a', 'at', 'atom', 'be', 'beyond', 'cs', 'csrf']
    // var ll = l.filter(item => {
    //     return false
    // })
    // console.log(ll)

    // var obj = {
    //     'f': function (item) {
    //         console.log(item)
    //     }
    // }

    // var obj = {
    //     'f': item => 99
    //
    // }
    // obj['f']('999')
    //
    //
    // var f = function (item, key) {
    // }
    // var f1 = (item, key) => {
    // }
</script>
</html>

数据的双向绑定

# input 标签的内容发生变化，js变量就发生变化，js变量变化，内容就变
点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="./js/vue.js"></script>
</head>
<body>
<div id="app">
    <div class="row">
        <div class="col-md-6 col-md-offset-3">
            <h1>v-model</h1>
            用户名：<input type="text" v-model="name"> --->{{name}}

        </div>


    </div>


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


</script>
</html>
posted @   扶我上码  阅读(237)  评论(0)  编辑  收藏  举报
（评论功能已被禁用）
相关博文：
·  Vue 03——事件处理、表单控制、购物车、v-model、vue生命周期、vue与后端交互
·  Vue 01——基础
·  vue---style和class使用，条件渲染，列表渲染之购物车显示不显示，v-for遍历数字，数组，对象，key值解释和数组的检测与更新，事件处理之过滤案例和事件修饰符
·  vue篇：标签渲染、事件处理...
·  vue day02
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 三行代码完成国际化适配，妙~啊~
· .NET Core 中如何实现缓存的预热？
点击右上角即可分享
微信分享提示
SQL AI 助手