• Vue插值操作

    1. Mustache语法

     mustache是胡须的意思，因为{{}}像胡须，又叫大括号语法。

    ​ 在vue对象挂载的dom元素中，{{}}不仅可以直接写变量，还可以写简单表达式。

    1. <div id="app">
    2.         
    3.         <h2>{{name}}h2>
    4.         
    5.         <h2>{{count>5? "4": "5" }}h2>
    6.         <h2>{{4+3}}h2>
    7.  
    8.     div>
    9.     <script>
    10.         const vm = new Vue({
    11.             el: '#app',
    12.             data() {
    13.                 return {
    14.                     name: '张三',
    15.                     count: 10
    16.  
    17.                 }
    18.             }
    19.         })
    20.     script>

     2. v-once

    ​ v-once表示该dom元素只渲染一次，之后数据改变，不会再次渲染。（也就是再次修改修改值时，页面不会渲染）

    1.  <div id="app">
    2.         
    3.         <h2>{{name}}h2>
    4.         
    5.         <h2 v-once>{{name}}h2>
    6.   div>
    7.     <script>
    8.         const vm = new Vue({
    9.             el: '#app',
    10.             data() {
    11.                 return {
    12.                     name: '张三'
    13.                     
    14.  
    15.                 }
    16.             }
    17.         })
    18.     script>

     ​ 上述{{name}}的name修改后，第一个h2标签数据会自动改变，第二个h2不会

    3. v-html

    ​ 在某些时候我们不希望直接输出百度一下这样的字符串，而输出被html自己转化的超链接。此时可以使用v-html。它是能够识别标签的，但是它会把所在标签的内容给覆盖

    1. <body>
    2.     <div id="app">
    3.         <h2 v-html="src">12334h2>
    4.     div>
    5.     <script>
    6.         const vm = new Vue({
    7.             el: '#app',
    8.             data() {
    9.                 return {
    10.                     src: "百度一下"
    11.                 }
    12.             }
    13.         })
    14.     script>

     12334被覆盖了

    4. v-text

    v-text会覆盖dom元素中的数据，相当于js的innerText方法。不能识别标签

    1. <div id="app">
    2.         <h2 v-text="src">12334h2>
    3.     div>
    4.     <script>
    5.         const vm = new Vue({
    6.             el: '#app',
    7.             data() {
    8.                 return {
    9.                     src: "百度一下"
    10.                 }
    11.             }
    12.         })
    13.     script>

     5. v-pre

    有时候我们期望直接输出{{name}}这样的字符串，而不是被{{}}语法转化的name的变量值，此时我们可以使用v-pre标签。

    1. <div id="app">
    2.         <h2 v-pre>{{name}}h2>
    3.     div>
    4.     <script>
    5.         const vm = new Vue({
    6.             el: '#app',
    7.             data() {
    8.                 return {
    9.                     name:'张三'
    10.                 }
    11.             }
    12.         })

     6. v-cloak

    有时候因为加载延时问题，例如卡掉了，数据没有及时刷新，就造成了页面显示从{{message}}到message变量“你好啊”的变化，这样闪动的变化，会造成用户体验不好。此时需要使用到v-cloak的这个标签。在vue解析之前，div属性中有v-cloak这个标签，在vue解析完成之后，v-cloak标签被移除。简单，类似div开始有一个css属性display:none;，加载完成之后，css属性变成display:block，元素显示出来。

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <meta charset="UTF-8">
    6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.   <title>v-cloak指令的使用title>
    9.   <style>
    10.     [v-cloak]{
    11.       display: none;
    12.     }
    13.   style>
    14. head>
    15.  
    16. <body>
    17.   <div id="app" v-cloak>
    18.     <h2>{{message}}h2>
    19.   div>
    20.   <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">script>
    21.   <script>
    22.     //在vue解析前，div中有一个属性cloak
    23.     //在vue解析之后，div中没有一个属性v-cloak
    24.     setTimeout(() => {
    25.       const app = new Vue({
    26.         el: "#app",
    27.         data: {
    28.           message: "你好啊"
    29.         }
    30.       })
    31.     }, 1000);
    32.   script>
    33. body>
    34.  
    35. html>

    ​ 这里通过延时1秒模拟加载卡住的状态，结果一开始不显示message的值，div元素中有v-cloak的属性，1秒后显示message变量的值，div中的v-cloak元素被移除。

     

  • 相关阅读:
    Express框架操作MongoDB数据库
    SpringBoot和Vue实现用户登录注册与异常处理——基于SpringBoot和Vue的后台管理系统项目系列博客（十三）
    手把手推导分布式矩阵乘的最优并行策略
    Win7下设置“定时关机”的方法
    Linux服务器安装MYSQL
    嵌入式系统中如何正确使用动态内存？
    你绝对想象不到的端对端通信的几种方式
    docker容器安装mysql
    【学习笔记】ARC147/ARC141/ARC145
    使用T2-U和Sensor_Hub开发一款智能温湿度计
  • 原文地址：https://blog.csdn.net/helongzhi/article/details/126000873