w3d5

最新推荐文章于 2024-04-23 10:35:20 发布

.qmm

最新推荐文章于 2024-04-23 10:35:20 发布

阅读量165

点赞数

本文链接：https://blog.csdn.net/Qmmmmmmmmmm/article/details/101274421

版权

说说几个常用的字符操作函数filter、some的差别

filter返回一个新数组，新数组中的元素是通过检查原数组中符合条件的所有元素。不会对空数组进行检测，也不会改变原始数组

some方法用于检测元素是否满足制定条件，会依次执行数组中的每个元素

indexOf和includes的差别

indexOf返回的是数值型的而includes返回的是布尔型的
数组中的indexOf不能判断数组中是否有NaN而includes可以

谈谈你对v-on的理解

通过 v-on 指令绑定一个事件监听器，通过它调用 Vue 中定义的方法

@click=“del(index)”和@click=“del(“index”)”`的差别是什么

@click="del(index)"点击删除当前选中的元素
@click="del(“index”)"点击删除当前元素数组里第一个元素

下列代码六个函数的执行顺序是什么

 <div onclick="m11();" @click.capture="m12()">
   <div onclick="m21();" @click.capture="m22()">
    <button onclick="m31();" @click="m32()">一个按钮</button>
   </div>
  </div>

m12()–m22()–m32()–m31()–m21()–m11()

定义一个私有指令，使加载该指令的标签都拥有红色字体

<!DOCTYPE html> <html> <head>
    <meta charset="utf-8">
    <title>红色字体</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js">

    </script> </head> <body> <div id="app">
    <div v-runoob="{ color: 'red', text: 'ww' }">

    </div>
</div>

<script>
    Vue.directive('runoob', function (el, binding) {
        el.innerHTML = binding.value.text
        el.style.color = binding.value.color
    })
    new Vue({
        el: '#app'
    })
</script>
</body>
</html>

**产品管理功能


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
    <script src="js/vue.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/bootstrap-3.3.7-dist/css/bootstrap.min.css">
</head>
<body>
<!--2、创建一个视图div，id是app-->
<div class="panel panel-default">
    <div class="panel-heading">
        <h3 class="panel-title">
            产品管理界面
        </h3>
    </div>
    <div id="app" class="panel-body">
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    添加产品
                </h3>
            </div>
            <div class="panel-body">
                产品名称：<input type="text" v-model="name">
                产品公司：<input type="text" v-model="gs">
                产品价格：<input type="text" v-model="jg">
                <button @click="add" class="btn btn-primary" style="height: 28px;margin-top: -2px">新增产品</button>
            </div>
        </div>
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">
                    查询产品
                </h3>
            </div>
            <div class="panel-body">
                姓名：<input type="text" v-model="searchName">
                <button @click="search" class="btn btn-info" style="height: 28px;margin-top: 1px">查询产品</button>
            </div>
        </div>
        <table class="table table-striped ">
            <thead>
            <tr>
                <td><input type="checkbox"></td>
                <td>产品名称</td>
                <td>产品公司</td>
                <td>产品价格</td>
                <td>是否删除</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(user, index) in search()">
                <td><input type="checkbox"></td>
                <td>{{user.name}}</td>
                <td>{{user.gs}}</td>
                <td>{{user.jg}}</td>
                <td>
                    <button @click="del(index)" class="btn btn-danger">删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--1、导入vue.js-->
<script src="js/vue.js"></script>
<script>
    /*3、创建vm对象*/
    var vm = new Vue({
        el: '#app',
        data: {
            name: '',
            gs: '',
            jg: '',
            searchName: '',
            users: [                {name: 'my-e', gs: 'my-e茶饮有限公司',jg:100},
                {name: '一点点', gs: '一点点有限公司',jg:100},
                {name: 'coco', gs: '都可有限公司',jg:100},
                {name: '喜茶', gs: '喜茶有限公司',jg:100},
            ],
        },
        methods: {
            add() {
                var user = {
                    name: this.name,
                    gs: this.gs,
                    jg:this.jg,
                }
                this.users.push(user);
            },
            del(index) {
                this.users.splice(index, 1);
            },
            search() {
                var resultArray=this.users.filter((user) => {
                    /*判断user是否符合条件，如果符合就返回true*/
                    var flag = user.name.includes(this.searchName);
                    return flag;
                })
                return resultArray;
            },

        }

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

.qmm

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
w3d5

说说几个常用的字符操作函数filter、some的差别filter返回一个新数组，新数组中的元素是通过检查原数组中符合条件的所有元素。不会对空数组进行检测，也不会改变原始数组some方法用于检测元素是否满足制定条件，会依次执行数组中的每个元素indexOf和includes的差别indexOf返回的是数值型的而includes返回的是布尔型的数组中的indexOf不能判断数组中是否有N...
复制链接

扫一扫