模板语法和数据

发布于:2022-12-20 ⋅ 阅读:(202) ⋅ 点赞:(0)

1.双括号里面的值为字符串 ,但属性有v-bind的话 双引号里面的值为表达式

    2.识别字符串,在容器里面用{{}}

    4.v-bind可以简写为 :

    5. vue语法模板有两大类:

        (1.插值模板

          用于标签体

        (2.指令语法:

        功能:用于解析标签(包括:标签属性、标签体内容、绑定事件...)

        举例:v-bind:href="xxx" 或 简写为 :href="xxx"   用双引号栝起来的为字符串 前面加了:  标签属性等号右边的值会变成 js表达式

    6.一个容器和一个vue实例,vue实例出现多个name  以最后一个name为内容

    <div class="root">

        <h1>插值语法</h1>

        <h3>你好,{{name}}</h3>

       <div>点我进{{name}}</div>

    </div>

       new Vue({

        el: '.root',

        data: {

            name: '占凯峰',    

            name:'小米'        

        }                      

    })

    7.容器当中的两个name都为小米,那要怎么解决呢  

    第一种  设置两个不同的name名,如name1 name2

    第二种:

        在data里面在嵌套一个

    <div class="root">

        <h1>插值语法</h1>

        <h3>你好,{{name}}</h3>

       <div>点我进{{a.name}}</div>

        <a :href="a.aa">点我进小米2</a>

    </div>

     new Vue({

        el: '.root',

        data: {

            name: '占凯峰',    

            a:{

                name:'小米',

                 aa: 'https://www.mi.com/index.html'

            }        

        }                      

    })

本文含有隐藏内容,请 开通VIP 后查看