02.Vue api [v-for、v-on、mustache语法、v-once、v-html、v-text、v-pre、 v-cloak]

最新推荐文章于 2022-02-03 11:08:04 发布

@司马懿

最新推荐文章于 2022-02-03 11:08:04 发布

阅读量116

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/qq_40406929/article/details/118671861

版权

VUE 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

v-for

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id ="vue">
  <ul>
    <li v-for=" Item in movie">{{Item}}</li>
  </ul>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    // 这个app的变量名，可省略，但是后期需要调用此实例的方法（or属性）时，需要
    el:'#vue',// 用于挂载要管理的元素
    data:{ // 定义数据
      message:'你好！华为',
      movie:['22222','33333','444444','555555']
    }
  });

</script>
</body>
</html>

v-on

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id ="vue">
  <h2>当前技计数：{{counter}}</h2>
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button>
  </ul>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#vue',
    data:{
      counter:0
    }
  });
</script>
</body>
</html>

把count的计算放到js中后进行计算，我们调用方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id ="vue">
  <h2>当前技计数：{{counter}}</h2>
  <button v-on:click="add">+</button>
  <button v-on:click="sub">-</button>
  </ul>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el:'#vue',
    data:{
      counter:0
    },
    methods:{
      add:function (){
        this.counter++;
      },
      sub(){
        this.counter--;
      }
    }
  });

</script>
</body>
</html>

mustache语法

<h1>{{message}}</h1>

mustache语法中，不仅可以直接写变量，也可直接写简单的表达式

<h1>{{message + firstName}}</h1>
<h1>{{message}} +''+ {{firstName}}</h1>

v-once

加上该标签后，只渲染一次，以后数值再改变，其html的显示也不跟着发生改变

<h2 v-once>{{meassge}}</h2>

v-html

解析vue实例中的 html元素

v-text

  <h2>{{sss}}</h2>
  <h2 v-text="sss"></h2>
  // 上述两种效果相同

不推荐使用，因为这个 v-text 会相对mustache语法会比较缺少灵活，不能拼接

还有就是在bbb的值会覆盖v-text 的变量值

  <h2 v-text="sss">{{bbb}}</h2>

v-pre

  <h2 v-pre>{{message}}</h2>

会原封不动的解析出来

v-cloak

加上这个标签，防止数据没有渲染完，而导致会让用户提前看到未渲染成功的{{sss}}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>

  <style>
    [v-clocl]{
        display: none;
    }
  </style>
</head>
<body>

<div id ="vue">
  <h2 v-cloak>{{sss}}</h2>
</div>

<!-- 引入vue.js 文件-->
<script src="../js/vue.js"></script>
<script>

  const app = new Vue({
    el:'#vue',
    data:{
      counter:' <a href="http://www.baidu.com">百度一下</a>',
      sss:'jiangjiang'
    },
  });

</script>
</body>
</html>

@司马懿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
02.Vue api [v-for、v-on、mustache语法、v-once、v-html、v-text、v-pre、 v-cloak]

v-for<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id ="vue"> <ul> <li v-for=" Item in movie">{{Item}}</li> .
复制链接

扫一扫