v-text & v-html 指令

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script type="text/javascript" src="../assets/js/vue.js"></script><title>v-text & v-html 案例</title></head><body><h1>v-

ZhiYuanYe

3532人浏览 · 2017-07-09 11:22:46

ZhiYuanYe · 2017-07-09 11:22:46 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>v-text & v-html 案例</title>
</head>
<body>
    <h1>v-text & v-html 案例</h1>
    <hr>
    <div id="app">
        <!--{{xxx}}这种方式不太友好，网速慢的时候是先显示{{xxx}},再替换内容-->
        <!--建议使用v-text、v-html(谨慎使用，可能引起跨站脚本攻击)-->
        <span>{{ message }}</span>=<span v-text="message"></span><br/>
        <span v-html="msgHtml"></span>
    </div>

    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello Vue!',
                msgHtml:'<h2>hello Vue!</h2>'
            }
        });
    </script>
</body>
</html>

这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^