vuejs3.0 从入门到精通——Vue语法——插值绑定

Vue语法——插值绑定

插值绑定是 Vue 中最常见的、最基本的语法。

绑定的内容主要有文本插值和 HTML 插值两种。

一、文本插值

文本插值用双大括号{{}}将要绑定的变量、值、表达式括住就可以实现,Vue 将会获取计算后的值,并以文本的形式将其展示出来。

举个例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
    .profile{
        display: inline-block;
        width: 300px;
    }
</style>
<div id="app" style="margin-left:300px">
    <h3>文本插值</h3>
    <p><label calss="profile">变量: </label>{{num}}</p>
    <p><label calss="profile">表达式: </label>{{5+10 }}</p>
    <p><label calss="profile">三目运算: </label>{{ ture ? 15 : 10}} </p>
    <p><label calss="profile">函数: </label>{{getNum()}}</p>
    <p><label calss="profile">对象: </label>{{ {num:15} } }} </p>
    <p><label calss="profile">函数对象: </label>{{ getNum }} </p>
    <p><label calss="profile">html代码(表达式): </label>{{'<span>15</span>'}}</p>
    <p><label calss="profile">html代码(变量): </label>{{{HTML}} </p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  
<script type="text/javascript">
  const app = {
      data(){
          return" {
              num: 15,
              HTML: '<span>15</span>'
          }
      },
      methods: {
          getNum() {
              return this.num;
          }
      }
  };
  Vue.createApp(app).mount('#app');
</script>

二、HTML 插值

HTML 插值可以动态渲染 DOM 节点,常用于处理开发者无可预知和难以控制的 DOM 结构,如渲染用户随意书写的文档结构等。

例子略了,和上面差不多,v-html,比较的简单。

posted @   左扬  阅读(162)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
levels of contents
点击右上角即可分享
微信分享提示