VUE指令及用法大全——（一）插值表达式

插值表达式

最初都是小白

11348人浏览 · 2019-04-08 13:35:17

最初都是小白 · 2019-04-08 13:35:17 发布

插值表达式语法：{{}}

使用时请注意以下几点：

插值表达式是vue框架提供的【指令】
插值表达式中不可以写代码片段会报错
属性节点中不能使用插值表达式，如果要为元素节点动态绑定数据，我们要用v-bind动态绑定属性（下篇文章讲）

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- 1.导入包 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 2.添加id为app的div，将来要被vue控制-->
    <div id="app">
        <!-- 注意 这是{{}} 其实是vue框架提供的【指令】 -->
        <!-- {{}} 语法 叫做 插值表达式 -->
        <p>{{msg}}</p> 
        <hr>

        <p>{{msg.length}}</p> 
        <hr>

        <p>{{msg + '~~~~~'}}</p> 
        <hr>

        <p>{{dlag ? '条件为真' : '条件为假'}}</p> 
        <hr>

        <!-- 插值表达式中 不可以写代码片段 会报错-->
        <!-- <p>{{for(var i = 0 ; i < 5 ; i++){}}}</p> -->


        <h1 title="hello">娃哈哈</h1>

        <!-- 3.注意属性节点中不能使用插值表达式 -->
        <!-- 如果要为元素节点动态绑定数据，我们要用其他方法 -->
        <!-- <h1 title="{{msg}}">娃哈哈</h1> -->
    </div>

    <!-- 注意如果指令想要生效，必须放在vue控制的区域内 -->
    <!-- <h1>{{msg}}</h1>  -->

<script>
    // 3.创建vue实例对象，并指定要控制的页面区域
    const vm = new Vue({
        // VM 实例对象，会监听data中，每一项数据的变化，
        // 只要监听到了数据的改变，就会重新把el指定区域中的所有指令
        // 从新解析一遍
        el:'#app',// 要控制页面上的哪个区域
        data:{//表示页面上要渲染的数据
            msg:'Hello XiaoMeiZi!',
            flag:true
        }
    }) 
</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}$/, //不连续的两位字母// /^