Vue学习(二)-胡子({{}})语法

一，插值操作这种语法叫做 Mustache 语法中文叫做胡子的意思，两个 {{}} 长的比较像胡子，所以这样命名了<body><div id="app"><p>{{ message }}</p><p>{{ message +...

狄鸠

5564人浏览 · 2019-12-05 10:30:12

狄鸠 · 2019-12-05 10:30:12 发布

一，插值操作

这种语法叫做 `Mustache` 语法

中文叫做胡子的意思，两个 {{}} 长的比较像胡子，所以这样命名了

<body>
    <div id="app">
        <p>{{ message }}</p>					<!-- 直接在模板里面写 --> 
        <p>{{ message + ' ' + message }}</p>	 <!-- 进行字符串的 + 操作 --> 
        <p>{{ (num+10) * 2 }}</p>				<!-- 数字相乘 --> 
        <p>{{ message }} {{ message }}</p>		<!-- 两个插值 --> 
    </div>
    <script src="VueJs/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!',
                num: 0
            }
        })
    </script>
</body>

涉及插值操作的指令

v-once

我们知道，在Vue里面，所有的数据都是响应式的，我们不想让某些数据发生改变，就需要用到这个指令

添加该属性的DOM元素，该DOM元素内的**{{}}里面的值不会发生改变**

<div id="app">
    <h2>{{message}}</h2>
    <h2 v-once>{{message}}</h2>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!',
        }
    })
</script>

在这里插入图片描述

v-html

有时候服务器给我们返回的不是数据二十一串html的字符串，我们想把他转换成DOM元素放到页面中

<div id="app">
    <h2>{{ message1 }}</h2>		<!-- 显示错误 -->
    <h2 v-html="message2"></h2>	<!-- 显示成功 -->
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message1: '<a href="https://www.baidu.com">百度</a>',
            message2: '<a href="https://www.baidu.com">百度</a>',
        }
    })
</script>

在这里插入图片描述

v-text

把文本数据覆盖到DOM元素中，如果原先要填充的DOM元素中有另外的文本也会被覆盖

v-pre

不对 {{}} 里面的值进行解析，数据原封不动展现出来

<div id="app">
    <h2>{{ message }}</h2>
    <h2 v-pre>{{ message }}</h2>
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '你好呀',
        }
    })
</script>

在这里插入图片描述

v-cloak

有些情况下，浏览器可能还没有解析出我们编写的 ViewModel ，页面会直接显示处未渲染的 {{ data }}

在这里插入图片描述

使用该指令可以解决问题

<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <h2 v-cloak>{{ message }}</h2>		<!-- 等到数据渲染之后，v-vloak这个属性会消失 -->
</div>

<script>
    setTimeout(function() {
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue'
            },
        })
        }, 1000)
</script>

在这里插入图片描述

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}$/, //不连续的两位字母// /^