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

Vue语法——插值绑定

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

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

一、文本插值

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

举个例子：

<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，比较的简单。