首页 > 其他分享 >条件、列表渲染与双向数据、事件绑定与事件修、按键修饰符

条件、列表渲染与双向数据、事件绑定与事件修、按键修饰符

时间：2022-10-25 22:37:00浏览次数：60  
标签：绑定 console name 修饰符 value 事件 key var log

style和class

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <style>
        .red {
            background-color: red;
        }
        .size {
            font-size: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>class使用</h1>
    <div :class="classStr">我是classStr的div</div>
    <div :class="classList">我是classList的div</div>
    <div :class="classObj">我是classObj的div</div>
    <h1>style使用</h1>
    <div :style="styleStr">我是styleStr的div</div>
    <div :style="styleList">我是styleList的div</div>
    <div :style="styleObj">我是styleObj的div</div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // class的字符串用法
            classStr: 'red',
            // class的数组用法，类本身可以放多个，用数组最合适
            classList: ['red'],
            // class的对象用法
            classObj: {red: true, size: false},
            // style的字符串用法，不方便进行修改
            styleStr: 'background-color: blue;font-size: 50px;',
            // style的数组用法，样式如果是多个单词用'-'连接的形式可以改为驼峰体
            styleList: [{backgroundColor: 'blue'},{fontSize: '50px'}],
            //style的对象用法，
            styleObj: {backgroundColor: 'blue',fontSize: '50px'},
        },
    })
</script>
</html>

条件渲染

1.要写在标签上，控制标签的显示与不显示
v-if=
-布尔值/运算完是布尔值
v-else-if=
-布尔值/运算完是布尔值
v-else
'&&是and的意思'
  • 条件渲染使用
<!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>
    <div v-if="score>=80">优秀</div>
    <div v-else-if="score>= 60 && score<80">合格</div>
    <div v-else>不及格</div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            score: 82
        },
    })
</script>
</html>

列表渲染

# v-for	:放在标签上，可以循环显示多个此标签

<!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>
    <style>
        .top {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container-fluid">
        <div class="row top">
            <div class="col-md-6 col-md-offset-3">
                <div class="text-center" style="margin-bottom: 30px">
                    <button @click="handleClick" class="btn btn-danger">加载购物车</button>
                </div>
                <div v-if="goodList.length>0">
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>商品id</th>
                            <th>商品名</th>
                            <th>商品价格</th>
                            <th>商品数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="i in goodList">
                            <th>{{i.id}}</th>
                            <th>{{i.name}}</th>
                            <th>{{i.price}}</th>
                            <th>{{i.count}}</th>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div v-else>
                    !<---->
                    什么都没有哦
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            goodList: []
        },
        methods: {
            handleClick(){
              this.goodList = [
                {id: 1, name: '老魔杖', price: '2000', count: 1},
                {id: 2, name: '魔法石', price: '1000', count: 3},
                {id: 3, name: '光轮2000', price: '200', count: 7},
                {id: 4, name: '隐形斗篷', price: '700', count: 2},
            ]
            }
        }
    })
</script>
</html>

v-for循环数组，循环字符串、数字、对象

v-for="(value, key) in obj"
-循环数字，value是从1开始的数字，key是索引值
-循环字符串，value是一个个字符，key是索引值
-循环对象，value是value对象，key是key
循环数组，value是数组的元素，key是索引值
  • v-for循环使用
<!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">
    <h1>循环数字</h1>
    <ul>
        <li v-for="(value, key) in num">key值为:{{key}}   value值为:{{value}}</li>
    </ul>
    <h1>循环字符串</h1>
    <ul>
        <li v-for="(value, key) in str">key值为:{{key}}   value值为:{{value}}</li>
    </ul>
    <h1>循环对象</h1>
    <ul>
        <li v-for="(value, key) in obj">key值为:{{key}}   value值为:{{value}}</li>
    </ul>
    <h1>循环数组</h1>
    <ul>
        <li v-for="(value, key) in girls">key值为:{{key}}   value值为:{{value}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            // 循环数字，value是从1开始的数字，key是索引值
            num: 4,
            // value是一个个字符，key是索引值
            str: 'barry18',
            // value是value对象，key是key
            obj: {name: 'barry', age: 18},
            // value是数组的元素，key是索引值
            girls: ['a1', 'b1', 'c1', 'd1'],
        },
    })
</script>
</html>

数组的检测与更新

<!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="handleClick2">点击修改数组页面变化</button>
    <p v-for="i in girls">{{i}}</p>
    <button @click="handleClick3">点击修改对象页面变化</button>
    <p v-for="(value,key) in obj">{{value}}---{{key}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            obj: {name: 'barry', age: 18},
            girls: ['a1', 'b1', 'c1', 'd1'],
        },
        methods: {
            handleClick() {
                this.girls.push('1号')
            },
            handleClick1() {
                // 页面没有变化
                var a = this.girls.concat(['a号', 'b号', 'c号'])
                console.log(a)
            },
            handleClick2() {
                // 监控到数组变化
                Vue.set(this.girls, 0, '0号')
            },
            handleClick3() {
                // 监控到对象变化
                Vue.set(this.obj, 'height', 175)
            }
        }
    })
</script>
</html>

双向数据绑定

1.input标签，v-model：数据双向绑定
-属性指令绑定: value='变量'  # 数据是单向绑定的
-属性指令绑定: v-model="name"  # 数据是双向绑定的
2.使用
<!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>
    <p>用户名:<input type="text" v-model="name"></p>
    <p>密码:<input type="password" v-model="password"></p>
    <button @click="handleClick">提交</button>{{err}}
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            password: '',
            err: '',
        },
        methods: {
            handleClick() {
                console.log(this.name, this.password)
                this.err='用户名密码错误'
            },
        }
    })
</script>
</html>

事件绑定

<!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>input的事件处理</h1>
    <h2>blur事件</h2>
    <p>用户名:<input type="text" v-model="name" @blur="handleBlur">{{name}}</p>
    <h2>change事件</h2>
    <p>用户名:<input type="text" v-model="name1" @change="handleChange">{{name1}}</p>
    <h2>input事件</h2>
    <p>用户名:<input type="text" v-model="name2" @input="handleInput">{{name2}}</p>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            name1: '',
            name2: '',
        },
        methods: {
            handleBlur(){
                console.log('失去焦点就触发', this.name)
            },
            handleChange(){
                console.log('失去焦点后发生变化就触发', this.name1)
            },
            handleInput(){
                console.log('发生变化就触发', this.name2)
            },
        }
    })
</script>
</html>

过滤案例

1.filter数组过滤
var l = ['a', 'b', 'c', 'd', 'e', 'f', 'g']
// 数组内置的filter需要使用匿名函数，接收一个参数是循环的从数组中取出传入匿名函数
l.filter(function (i) {
    // 返回true或false，如果返回true则该值保留，如果返回false则该值舍弃
    return false
})

2.indexOf判断字符串是否在字符串中
var s='jwaipfdw'
var a ='a'
// 获取字符串在字符串中的位置
console.log(s.indexOf(a)>=0)

3.es6箭头函数
3.1正常的函数
var f=function (){
    console.log('打印了')
}
3.2不带参数的箭头函数
var f = () => {
    console.log('打印了')
}
3.3带一个参数，没有返回值得箭头函数
var f = name=>{
    console.log('打印了', name)
}
3.4多个参数，没有返回值
var f = (name,age) => {
    console.log('打印了', name,age)
}
3.5带一个参数，有返回值
var f = function (name) {
    return name+'nb'
}
-简写为一行
var f = name=> name+'nb'
'''
对象内部的this就是对象自己
箭头函数没有自己的this，会用上一层的this
'''
  • 过滤案例
<!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>
    <p><input type="text" v-model="search" placeholder="输入搜索内容" @input="handleSearch"></p>
    <ul>
        <li v-for="i in dataList">{{i}}</li>
    </ul>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
            dataList: ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'ab', 'abc'],
        },
        methods: {
            handleSearch() {
                console.log('搜索内容是:', this.search)

                // 复杂写法
                // this.dataList=this.dataList.filter(i=>{
                //     // 判断this.search是否在i中，如果在则返回true，不在则返回false
                //     if (i.indexOf(this.search)>=0){
                //         return true
                //     }else {
                //         return false
                //     }
                // })

                // 简单写法
                this.dataList = this.dataList.filter(i => i.indexOf(this.search) >= 0)

            },
        }
    })
</script>
</html>

事件修饰符

.stop
-只处理自己的事件，不向父控件冒泡

.self
-只处理自己的事件，子控件冒泡的事件不处理

.prevent
-阻止a链接的跳转

.once
-事件只会触发一次
  • 修饰符使用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>-->
    <!--    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">-->
    <!--        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>事件修饰符</h1>
    <h2>事件冒泡--通过事件修饰符stop，加在子控件上，阻止事件冒泡</h2>
    <ul @click="handleUl">
        <li @click.stop="handleStop">点击stop</li>
        <li @click="handleClick">点击click</li>
    </ul>
    <h2>事件冒泡--通过事件修饰符stop，self加在父控件上，只处理自己的事件</h2>
    <ul @click.self="handleUl">
        <li @click="handleClick">点击click</li>
    </ul>
    <h2>事件冒泡--通过事件修饰符prevent，阻止a标签跳转</h2>
    <a href="http://www.baidu.com" @click.prevent="handleA">点我去百度</a>
    <h2>事件冒泡--通过事件修饰符once，只能点一次</h2>
    <hutton @click.once="handleOnce">只能点一次</hutton>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            handleUl() {
                console.log('点击了ul')
            },
            handleStop(){
                console.log('点击了stop')
            },
            handleClick(){
                console.log('点击了click')
            },
            handleA(){
                console.log('点击了a')
            },
            handleOnce(){
                console.log('只能点一次')
            },
        }
    })
</script>
</html>

按键修饰符

<!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>
    <input type="text" v-model="search" placeholder="输入搜索内容" @keyup.enter="handleUp">
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            search: '',
        },
        methods: {
            handleUp(event) {
                if (event.code == 'Enter'){
                    console.log('按了回车键')
                }
            },
        }
    })
</script>
</html>

标签：绑定,console,name,修饰符,value,事件,key,var,log
From： https://www.cnblogs.com/riuqi/p/16826615.html

相关文章

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99