💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、星火、月之暗面及文生图 广告
语法 ## 插值 ### 1.文本 {{ }} ~~~ {{message}} ~~~ ### 二、数据双向绑定 input和节点的数据绑定,当Input的值发生改变的时候,其他地方的值同时改变 ~~~ <p>{{message+99}}</p> <input type="text" v-model='message'> var vm=new Vue({ el:'#app', //数据放在data里面,数据形式可以是jason等不同格式 data:{ message:'hello' } }); ~~~ ## 指令 ### 三、v-if v-else判断是否加载 ,v-show是否显示 ~~~ <p v-show='ok'>v-if判断是否加载,v-show调整css的display属性</p> ~~~ ### 四、v-for循环读取data的数据 ~~~ <div id="app"> <ul> <!-- //第一个参数为值,第二个参数为索引 --> <li v-for="(aa,index) in st2"> {{index}}----{{aa.name}}----{{aa.value}} </li> </ul> <hr> <ul> <li v-for="bb in devstu"> {{bb}} </li> </ul> </div> <script> var vm = new Vue({ el: '#app', data: { student: [2, 4, 6, 8, 33], st2:[ {name:'tabao',value:'444'}, {name:'taba33o',value:'444444'}, ] }, //对data数据计算,字段computed,此处为排序 computed:{ devstu:function(){ return this.student.sort(); } } }); //自定义JS函数 function mysort(){ //#code } </script> ~~~