Web应用开发实战#Day12

最新推荐文章于 2022-09-27 19:56:53 发布

JimYagYong

最新推荐文章于 2022-09-27 19:56:53 发布

阅读量86

点赞数

本文链接：https://blog.csdn.net/JimYagYong/article/details/101278123

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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: 'MAC', gs: 'MAC魅克彩妆集团有限公司',jg:170},
                {name: '雅诗兰黛', gs: '雅诗兰黛彩妆集团有限公司',jg:300},
                {name: ‘YSl', gs: '圣罗兰彩妆有限公司',jg:400},
                {name: 'SukWhasoo', gs: '雪花秀彩妆有限公司',jg:500},
            ],
        },
        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>

Vue作业

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

调用 filter 的结果是创建一个新数组，数组的元素是通过所提供函数通过测试的所有元素
some表示只要数组元素某一项满足即可

indexOf和includes的差别

看函数的返回值：indexOf返回的是数值型的而includes返回的是布尔型的
都可以支持第二参数，而且的第二个参数都支持负数形式
数组中的indexOf不能判断数组中是否有NaN而includes可以

谈谈你对v-on的理解

v-on,它是来绑定事件监听器,这样我们就可以做一些交互了.

@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>

先执行32 再执行 31 再执行 22 再执行 21 再执行12 再执行11

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

<div id="app">
    <p :style='styles'>123</p>
</div>
<script>
    var vm=new Vue({
        el:"#app",
        data:{
            styles: {
                color: 'red',
            }
        }
    })
</script>

JimYagYong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web应用开发实战#Day12

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <link rel="styl...
复制链接

扫一扫