Vue.js中的模板语法详解,-CSDN博客

插值

插值可以访问以下内容

1. data 中的数据

2. methods 中的方法

插值可以插入的都是vue组件中的内容，且插值的内容实际是js表达式

        <div>{{ title }}</div>
        <div>{{getName()}}</div>
        <div>{{ '$$$' + title + '&&&' }}</div>

v-once

v-once 只插入一次静态值，之后修改属性值，则不在更新

 <div v-once>{{title}}</div>

v-text

插入纯文本 (相当于 innerText)

 <div v-text="myScript"></div>

属性绑定

v-bind

基本使用

<img v-bind:src="mySrc">

v-bind的缩写为冒号

 <img v-bind:src="mySrc" :width="100 + 100" :height="200">

一次绑定多个属性值

 <img v-bind="对象名">

条件渲染

v-if

v-if 的值是布尔表达式，当表达式的值为 true 时该元素显示，否则就不显示

 <div v-if="sex === 'male'">男</div>
 <div v-else-if="sex === 'female'">女</div>
 <div v-else>其他</div>

v-show

v-show 的值是布尔表达式，当表达式的值为 true 时该元素显示，否则就不显示

<div v-show="isShow">使用v-show进行显示</div>
 <div v-show="sex === 'male'">男</div>
 const App = {
        data() {
            return {
                isShow: true
            }
        }
    }
    let app = Vue.createApp(App)
    let vm = app.mount('#app')