侧边栏壁纸
博主头像
woku博主等级

成功的路上并不拥挤

  • 累计撰写 50 篇文章
  • 累计创建 13 个标签
  • 累计收到 3 条评论
vue

插值表达式的使用

woku
2022-03-07 / 0 评论 / 0 点赞 / 85 阅读 / 2,010 字

属性

  • attribute: HTML的扩展,比如在HTML标签上写href / src / data-XXX ,简称attr
  • property: 在对象内部存储数据,通常用来描述数据结构,简称prop

v-bind

在Mustache中不支持在HTML属性中插值

在vue中,存在模板编译系统,支持Vue内置的属性,使用v-bind给属性插值

        const MyParent = {
            data() {
                return {
                    title: 'this is my title'
                }
            },
            // template: `
            //   <h2 title="title">{{ title }}</h2>
            // `,
            template: `
              <h2 v-bind:title="title">{{ title }}</h2>
            `,
        }


        let app = Vue.createApp(MyParent)
        app.mount('#app')

title属性不使用v-bind进行插值,那么值就会当做字符串来看待,最后属性title的值就是字符串的title

使用v-bind进行插值,会当做JS表达式看待,最后title的值就是data中的title变量,变量title的值是this is my title

在标签内部插入,使用{{}}双大括号

在标签属性中插入,使用v-bind

       const MyParent = {
            data() {
                return {
                    title: 'this is my title',
                    isLogin: true
                }
            },
            template: `
              <h2 v-bind:title="title" :id="null" :class="undefined">{{ title }}</h2>
              <p>
                <textarea :disabled="!isLogin">
                </textarea>
              </p>
            `,
        }


        let app = Vue.createApp(MyParent)
        app.mount('#app')
        
        // disabled如果不使用v-bind,就是字符串,使用了v-bind就是一个表达式,最后会形成逻辑真假
        // falsy: false 0 '' null undefined NaN
        // truthy: 除falsy之外的值

        // 对于disabled逻辑真假的属性值来说
        // 只有truthy和‘’会在解析的过程中将disabled属性包含在元素上
        // 值是false NaN null undefined,在解析过程中disabled都不会出现在元素上

        // :id="null" :class="undefined" 这种在解析过程中ID不出现在元素上,class属性的值不存在。

插值只能绑定表达式

不管是双大括号插值还是属性绑定插值,都只能绑定表达式

一个插值只能绑定一个表达式

        const MyParent = {
            data() {
                return {
                    a: 1,
                    b: 2,
                    title: 'title',
                    subTitle: 'subtitle'
                }
            },
            template: `
               <!-- 运算表达式 -->
               <h1>{{ a + b }}</h1>
               <!-- 字符串拼接表达式 -->
               <h2>{{ 'a + b =' + (a + b) }}</h2>
               <!-- 判断表达式不能用if语句 -->
               <!-- <h2>{{ if (a > b) { return 'a大于b'} else { return 'a小于等于b'} }}</h2> -->
               <!-- 三元判断表达式 -->
               <h2>{{ a > b ? 'a大于b' : 'a小于等于b' }}</h2>
               <h2>{{ title || subTitle }}</h2>
               <h2>{{ title && subTitle }}</h2>
               <!-- 使用JS api -->
               <h3>{{title.split('').join('-')}}</h3>
               <!-- 一个插值不能绑定多个表达式 -->
               <!-- <h3>{{
                   a + b;
                   a - b
               }}</h3> -->
               <!-- 不能绑定语句 -->
               <!-- <h3>{{var c = 1;)}}</h3>  -->
               <!-- 绑定赋值表达式 -->
               <h3>{{ c = 12 }}</h3>
            `,
        }


        let app = Vue.createApp(MyParent)
        app.mount('#app')

var a; 声明语句
var a = 1; 声明赋值语句
a = 1 赋值表达式

0

评论区