156-vue02-条件渲染事件处理和表单控制_vue2 form 配置关系表达式-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40808228/article/details/111241123

本文详细讲解了Vue.js中条件渲染的购物车应用、v-if/v-else/v-else的使用，列表渲染的for循环技巧，数据双向绑定的v-model实践，表单控制（checkbox、多选、单选）及购物车全选功能，同时涵盖事件处理（input过滤、简单事件、修饰符和按键修饰符）。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

昨日回顾

1 vue:js框架,渐进式
2 mvvm架构,数据双向绑定(有些小坑),组件化开发,单页面开发
3 使用:cdn引入,下载下来导入,工程化(vue-cli创建vue工程),脚手架
4 插值{{ 变量,js语法,三目 }}
5 指令 v-xx指令,放在标签上的自定义属性
	v-html
    v-text
    v-on:@click 缩写@click
    v-bind:属性名='属性值' 缩写 :属性名='属性值js变量'
    v-if:dom的删除和插入
    v-show:样式的显示与不显示
6 样式控制
	:class='js变量字符串'  'js变量数组'
    :style='js变量对象'  'js变量数组'

style和class的控制

class三种控制方式

# 样式
<h1>class的三种写法</h1>
<div :class="isActive?'red':'green'">class三目写法</div>
<p :class="classObj">class对象写法</p>
<p :class="classarr">class数组写法</p>

# 数据
isActive: true,
// classObj:'red',
classObj: {red: true, green: false, font: true},
classarr: ['red', 'green'],

Style三种控制方式

# 样式
<h1>style的三种写法</h1>
<div style="background:red">style三目写法</div>
<div :style="'background:red'">style三目写法</div>
<div :style="'background:'+'red'">style三目写法</div>
<div :style="'background:'+(isActive?'red':'green')">style三目写法</div>
<p :style="styleobj">style对象写法</p>
<p :style="styleattr">style数组写法</p>

# 数据
isActive: true,
styleobj:{background:'yellow',fontSize:'60px'},
styleattr:[{background:'red'},]

今日内容

1 条件渲染

1.1 通过v-if和v-for实现购物车

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

<div id="box">

    <!--    土办法-->
    <!--    <ul>-->
    <!--        <li>{{shopping[0]}}</li>-->
    <!--        <li>{{shopping[1]}}</li>-->
    <!--        <li>{{shopping[2]}}</li>-->
    <!--    </ul>-->

    <!--v-for实现-->
    <ul v-if="shopping.length>0">
        <li v-for="data in shopping">{{data}}</li>
    </ul>
    <div v-else>购物车空空如也</div>
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            shopping: ['苹果', '香蕉', '桃子'],
        },

    })
</script>
</html>

1.2 v-if/v-else/v-else

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

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <div v-if="which==1">1111</div>
    <div v-else-if="which==2">2222</div>
    <div v-else>3333</div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            which:1
        },

    })
</script>
</html>

2 列表渲染

2.1 for循环数组、对象

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

    </style>
    <title>Title</title>
</head>
<body>

<div id="box">
    <h1>循环数组</h1>
    <div>
        <p v-for="data in arr">{{data}}</p>
    </div>
    <h1>循环对象</h1>
    <div>
        <p v-for="data in obj">{{data}}</p>
    </div>

    <h1>循环数组索引和value</h1>
    <div>
        <p v-for="(data,index) in arr">索引是：{{index}}，数据是{{data}}</p>
    </div>
    <h1>循环对象key和value</h1>
    <div>
        <p v-for="(value,key) in obj">key是：{{key}}，value是：{{value}}</p>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            arr: ['zs', 'ls', 'ww'],
            obj: {name: 'lqz', age: 18, sex: '男'},
        },

    })
</script>
</html>
</-vue中的数组和对象对应python中的列表和字典,但值和索引的位置是和python中相反的->

key值解释:

1 v-for循环数组/对象时,建议在控件(组件,标签)写一个key属性,属性值唯一
2 页面更新以后,加速dom的替换(渲染),替换用了一个diff算法
3 :key='变量'

2.2 数组更新与检测

0 数据双向绑定，数据变化，页面变，页面变化数据变
1 使用以下方法操作数组，可以检测变动：push，pop，shift，unshift,splice,sort,reverse
2 不会检测变动filter(),concat(),slice(),map()，新数组替换旧数组
	-页面不会更改：vm.arr.concat(['44','55'])
	-解决vm.arr=vm.arr.concat(['44','55'])
3 页面不会更改：通过索引值更新数组
	-解决方案一：
    vm.arr[0]
    "11"
    vm.arr[0]='99'
    "99"
    vm.arr.splice(0,1,'88')
    ["99"]
	-解决方案二
		Vue.set(vm.arr,0,'lqz')

3 上面能更新是因为作者重写了那些方法

3 事件处理

3.1 input过滤案例

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

<div id="box">
    <!--
    blur:失去焦点触发
    change：失去焦点触发，跟blur一样
    input:数据发生变化，就会触发
    -->

<!--    <input type="text" v-model="myinput" @blur="handleChange">   {{myinput}}-->
<!--    <input type="text" v-model="myinput" @change="handleChange">   {{myinput}}-->
    <input type="text" v-model="myinput" @input="handleChange">   {{myinput}}
    <br>
    <div>
        <p v-for="data in new_arr">{{data}}</p>
    </div>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput:'',
            arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
            new_arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
        },
        methods:{
            handleChange(){
                console.log(this.myinput)
                //控制arr的变化，数据又双向绑定了，页面就会变化
                this.new_arr=this.arr.filter(item=>{
                    return item.indexOf(this.myinput) >-1
                })

            }
        }

    })
    //
    // var a=['aabbc', 'abc', 'aabcd','ccdd','bbcc']
    // var res=a.filter(function (itme) {
    //     // if (itme.length >4){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     // if (itme.indexOf('aa')>-1){
    //     //     return true
    //     // }else {
    //     //     return false
    //     // }
    //     return itme.indexOf('a')>-1
    //
    // })
    //
    //
    // var res=a.filter(item=>{
    //     return itme.indexOf('a')>-1
    // })
    // console.log(res)
    //
    //
    // ES5
	var add = function (a, b) {
    	return a + b;
	};
	// ES6中新写法,使用箭头函数
	var add = (a, b) => a + b;

</script>
</html>

3.2 简单事件

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

<div id="box">
    <button @click="isShow=!isShow">点我折叠1</button>
    <button @click="handleClick">点我折叠2</button>
    <button @click="handleClick">点我折叠3,传递event参数</button>

    <div v-show="isShow">
        <p>aaaaaaa</p>
        <p>bbbbbbb</p>
        <p>ccccccc</p>
    </div>
</div>

</body>
<script>
    var vm=new Vue({
        el:'#box',
        data:{
            name:'hello world',
            isShow:true
        },
        methods:{
            handleClick(event){
                console.log(event)
                this.isShow=!this.isShow
            }
        }
    })
</script>
</html>

3.3 事件修饰符

.stop 阻止事件冒泡(传递到父类)
.self 只处理自己的事件，子控件冒泡的事件不处理
.prevent 阻止a链接跳转
.once 只处理一次就解绑(抽奖页面)

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

<div id="box">
    <ul @click.self="handleUl">
        <!--        <li v-for="data in datalist" @click="handleLi($event)">{{data}}</li>-->
        <!--        <li v-for="data in datalist" @click.stop="handleLi">{{data}}</li>-->
<!--        <li v-for="data in datalist" @click="handleLi">{{data}}</li>-->
        <li v-for="data in datalist" @click.once="handleLi">{{data}}</li>
    </ul>

    <a href="http://www.baidu.com" @click.prevent="handleA">点我看美女</a>

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            datalist: ['111', '222', '333']

        },
        methods: {
            // handleLi(ev) {
            //     console.log('li被点击了')
            //     ev.stopPropagation()  //点击事件停止向父组件传递
            // },
            handleLi() {
                console.log('li被点击了')
            },
            handleUl() {
                console.log('Ul被点击了')
            },
            // handleA(ev){
            //     console.log('a被点击了')
            //     ev.preventDefault() //阻止a标签的跳转
            // }
            handleA() {
                console.log('a被点击了')
            }
        }
    })
</script>
</html>

3.4 按键修饰符

敲回车就执行

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

<div id="box">

<!--    <input type="text" v-model="myinput" @keyup.enter="handleKey">-->
    <input type="text" v-model="myinput" @keyup.13="handleKey">
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: ''

        },
        methods: {
            // handleKey(ev){
            //     console.log('xxx')
            //     console.log(ev)
            //     if(ev.keyCode==13){
            //         console.log('回车被按下了')
            //     }
            //
            // }
            handleKey() {
                console.log('回车被敲')
            }
        }
    })

</script>
</html>

4 数据双向绑定

4.1 v-model的使用

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

<div id="box">
    <input type="text" v-model="myinput">
    <br>
    {{myinput}}
    <br>
    <textarea name="" id="" cols="30" rows="10" v-model="text"></textarea>
    <br>
    {{text}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            myinput: '',
            text: '',
        },
    })

</script>
</html>

5 表单控制

5.1 checkbox选中

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

<div id="box">

    <h1>表单相关之checkbox</h1>
    <input type="checkbox" v-model="check">记住密码
    <br>
    {{check}}

</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            check: true,
        },
    })

</script>
</html>

5.2 多选

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

<div id="box">
    <h1>表单相关之checkbox多选</h1>
    <h3>你喜欢的女明星</h3>
    <input type="checkbox" v-model="checkgroup" value="lyf">刘亦菲
    <input type="checkbox" v-model="checkgroup" value="baby">baby
    <input type="checkbox" v-model="checkgroup" value="egon">egon
    <br>
    {{checkgroup}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',
        data: {
            checkgroup: [],
        },
    })

</script>
</html>

5.3 单选

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

<div id="box">
  
    <h1>表单相关之radio</h1>
    <input type="radio" v-model="ra" value="男">男
    <input type="radio" v-model="ra" value="女">女
    <input type="radio" v-model="ra" value="未知">未知
    <br>
    {{ra}}

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

</script>
</html>

5.4 购物车案例

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

<div id="box">
    <ul>

        <li v-for="data in list"><input type="checkbox" v-model="checklist" :value="data">{{data}}</li>
    </ul>
    <hr>
    {{checklist}}
    <br>
    total:{{totalPrice()}}
</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',

        data: {
            list: [
                {name: 'apple', price: 12, num: 1},
                {name: 'banana', price: 19, num: 3},
                {name: 'peach', price: 6, num: 5},
            ],
            checklist: [],
        },
        methods: {
            totalPrice() {
                var sum_price = 0
                for (i in this.checklist) {
                    sum_price += this.checklist[i]['price'] * this.checklist[i]['num']
                }
                return sum_price
            }
        }
    })
</script>
</html>

5.5 购物车全选和全不选

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

<div id="box">
    <input type="checkbox" v-model="isAll" @change="handleChange">全选/取消
    <ul>

        <li v-for="data in datalist"><input type="checkbox" v-model="checklist" :value="data" @change="handleOne">{{data}}
        </li>
    </ul>
    <hr>
    {{checklist}}
    <br>
    total:{{totalPrice()}}


</div>

</body>
<script>
    var vm = new Vue({
        el: '#box',

        data: {
            isAll: false,
            datalist: [
                {name: 'apple', price: 12, num: 1},
                {name: 'banana', price: 19, num: 3},
                {name: 'peach', price: 6, num: 5},
            ],
            checklist: [],
        },
        methods: {
            totalPrice() {
                var sum_price = 0
                for (i in this.checklist) {
                    sum_price += this.checklist[i]['price'] * this.checklist[i]['num']
                }
                return sum_price
            },
            handleChange() {
                if (this.checklist.length > 0) {
                    this.checklist = []
                } else {
                    this.checklist = this.datalist
                }
            },
            handleOne() {
                if (this.checklist.length == this.datalist.length) {
                    this.isAll = true
                } else {
                    this.isAll = false
                }
            }
        }

    })
</script>
</html>