Vue2.0-2-数据绑定三种方式

一、绑定数据的三种方式1：普通文本绑定，mustach语法【双大括号】 {{}}或者使用v-text 绑定【常用】2：解释HTML标签的绑定：使用v-html绑定【慎用】2.1 注意：除非是信任的内容使用这样的方式进行数据绑定2.2 这样的绑定方式，如果内容不是被信任的，有可能会造成XSS攻击3：将数据绑定到标签的属性上，使用v-bind:属性名称=

孟烦了

3815人浏览 · 2017-03-17 20:33:46

孟烦了 · 2017-03-17 20:33:46 发布

一、绑定数据的三种方式

1：普通文本绑定，mustach语法【双大括号】 {{}} 或者使用v-text 绑定【常用】

2：解释HTML标签的绑定：使用v-html绑定【慎用】

    2.1 注意：除非是信任的内容使用这样的方式进行数据绑定    
    2.2 这样的绑定方式，如果内容不是被信任的，有可能会造成XSS攻击

3：将数据绑定到标签的属性上，使用 v-bind:属性名称=”变量” 来绑定【常用】

二、使用方法

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Vue初探</title>
        <script src="../js/lib/vue/vue.js"></script>
    </head>
    <body>

        <div id="app">
            {{message}}
            <br />
            <span v-text="message"></span>
            <br />
            <span v-html="info"></span>
            <br />
            <span v-bind:title="msg">穷人折腾失败了，还是穷人，万一成功呢？</span>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    message:"<p>就是拼才华</p>",
                    info:"<h2>你说呢，小伙子</h2>",
                    msg:"就是傲娇"
                }
            });
        </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}$/, //不连续的两位字母// /^