zoukankan      html  css  js  c++  java
  • Vue---第十七章v-once

    1.之前我们绑定的数据修改一个内容之后其它内容也跟着变化,但是有时候我们只想改一个地方,那么这个时候我们需要用到v-once

    首先我们看看之前的代码内容

     2.然后我们使用vue进行调试时改变一个内容后其它内容都随之跟着改变

     3.查看效果

    我们在F12调试页面中修改我们的内容再次查看效果

     然后会发现我们的第三条数据未发生变化,此为v-once简单用法

    v-html使用方法,为了防止XSS攻击,代码如下

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="app">
                {{name}}<br/>
                {{score+1}}<br/>
                <p>这是第一条数据内容</p>
                {{name}}<br/>
                <p>这是第二条数据</p>
                <span v-once>
                    {{name}}
                </span>
                <p>这是v-html数据</p>
                {{contentHtml}}
                <p v-html='contentHtml'></p>
        </div>
        <script src="./node_modules/vue/dist/vue.js"></Script>
        <script>
            var vue=new Vue({
                el:"#app",
                data:{
                    msg:'小桃子',
                    name:'xiaol',
                    score:100,
                    contentHtml:'<span style="color:red">此内容为红色字体</span>'
                }
            })
        </script>
    </body>
    </html>

     下面我们来看看效果

     比如改成这样

     展示的结果是js代码不去读取

    沫笙
  • 相关阅读:
    解读基础设施即代码
    在那江南烈日与阵雨中-江南100赛记
    写在2017年环汶川越野赛之前
    阿里巴巴Java开发手册评述
    一个程序员的2016年总结
    面向对象的思考过程第四版译者序
    以敏捷的方式运作一所大学
    敏捷团队中的QA由来
    Spring Batch在大型企业中的最佳实践
    Java基础 awt Button 鼠标放在按钮上背景颜色改变,鼠标离开背景颜色恢复
  • 原文地址:https://www.cnblogs.com/wendy-0901/p/14388043.html
Copyright © 2011-2022 走看看