标签过滤与vue学习

一.标签的过滤

        在写项目的时候对于输入内容的判断除了判断是否时非空之外还要判断是否带有html标签。因为在接受并呈现数据的时候如果没有考虑标签是否被过滤的情况则会时页面的视图效果变差。

例子：

未过滤标签：

    <table cellspacing="0" cellpadding="0" style="border: 1px solid black;">
        <thead>
            <tr>
                <th>商品</th>
                <th>类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td><h3><i>卫衣</i></h3></td>
                <td>服饰</td>
            </tr>
        </tbody>
    </table>

利用innerText时标签也呈现在表格内：

    <table cellspacing="0" cellpadding="0" style="border: 1px solid black;">
        <thead>
            <tr>
                <th>商品</th>
                <th>类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="tde"></td>
                <td>服饰</td>
            </tr>
        </tbody>
    </table>
    <script>
        var str='<h3><i>卫衣</i></h3>'
        document.getElementById("tde").innerText=str
    </script>

 

 过滤标签：

    <table cellspacing="0" cellpadding="0" style="border: 1px solid black;">
        <thead>
            <tr>
                <th>商品</th>
                <th>类型</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td id="tde"></td>
                <td>服饰</td>
            </tr>
        </tbody>
    </table>
    <script>
        var str='<h3><i>卫衣</i></h3>'
        str=str.replace(/<.*?>/g,"")
        document.getElementById("tde").innerHTML=str
    </script

 二.vue学习小结:

1.插值语法（{{xxx}}）中的xxx要写js表达式，且xxx可以自动读取到data中所有属性；

        因此，要对js表达式和js代码进行区分：

        js表达式：一个表达式会生成一个值，可以放在任何需要值的地方，即可以表示为：

const x=

(1). a :输入a的值(x=a);

(2)a+b,(x=a+b);

(3) demo(1):函数表用（x=demo(1）);

(4) x===y?'a':'b'

        js代码（语句）

（1）if(){};

  (2)for(){}不生成值只控制代码的走向

2.键盘事件：

        在通过敲击某个按键执行不同的操作过程中注意keyup与keydown的选取。对于Vue中常用的按键（回车: enter, 删除: delete（捕获“删除”和“退格”键),退出: esc,空格: space,换行: tab （特殊，必须配合keydown去使用）,上: up,下: down,左: left,右: right等）无特殊说明外经常采用keyup。但是对于系统修饰符则大多使用keydown，用法：

系统修饰键（用法特殊）：ctrl、alt、shift、meta(/win)
        (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
        (2).配合keydown使用，正常触发事件。

因此，需要了解到keyup与keydown的区别从而更好的理解前面的操作。

keyup与keydown的区别

一、触发不同

1、Keyup：Keyup的事件在键盘按键按下时立即触发。

2、Keydown：Keydown的事件在键盘按键放开时立即触发。

二、焦点不同

1、Keyup：Keyup事件触发的时候需要保证控件拥有焦点。

2、Keydown：Keydown事件触发的时候不需要保证控件拥有焦点。