【Vue】插值

最新推荐文章于 2025-03-15 16:52:19 发布

kuchabuku

最新推荐文章于 2025-03-15 16:52:19 发布

阅读量127

点赞数

分类专栏： # Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43479203/article/details/118379859

版权

Vue 专栏收录该内容

2 篇文章

订阅专栏

文本

{{}} 双大括号

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <p>{{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '寄了'
  }
})
</script>
</body>
</html>

HTML

V-html指令用于输出HTML代码
输出的是渲染好的h1格式的"带标题"

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-html="message"></div>
</div>
	
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>带标题</h1>'
  }
})
</script>
</body>
</html>

属性

v-bind指令主要用于属性绑定
下例就是绑定了class，如果checkbox被选中，则div应用class1的样式。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 </title>
  </head>
  <style>
    .class1 {
      background: #444;
      color: #eee;
    }
  </style>
  <body>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

    <div id="app">
      <label for="r1">修改颜色</label
      ><input type="checkbox" v-model="use" id="r1" /> <br /><br />
      <div v-bind:class="{'class1': use}">v-bind:class 指令</div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          use: false,
        },
      });
    </script>
  </body>
</html>

表达式

Vue提供了完整的JavaScript表达式的支持

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  </head>
  <body>
    <div id="app">
      {{5+5}}<br />
      {{ ok ? 'YES' : 'NO' }}<br />
      {{ message.split('').reverse().join('') }}
      <div v-bind:id="'list-' + id">菜鸟教程</div>
    </div>

    <script>
      new Vue({
        el: "#app",
        data: {
          ok: true,
          message: "RUNOOB",
          id: 1,
        },
      });
    </script>
  </body>
</html>