Vue - 2 插值语法与指令系统
一、插值语法
Vue中的插值语法必须写在标签内部,而DTL(Django Template Language)则可以写在标签的属性中
语法
| <body> |
| <div id="app"> |
| |
| {{变量名}} |
| |
| </div> |
| </body> |
| <script> |
| // 配置项 通过key:value的形式配置 |
| var vm = new Vue({ |
| el: '#app', // 标签选择 |
| // data是要插入的数据值,已k:v形式编写 |
| data: { |
| title: 'Vue插值语法', |
| desc: 'vue框架提供的插值语法,将数据渲染到对应的变量名中', |
| } |
| }) |
| </script> |
插值语法中可以放变量、对象取值、数组取值、简单的js语法、函数()
案例
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Title</title> |
| |
| <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
| </head> |
| <body> |
| |
| <div id="app"> |
| |
| <p>{{title}}</p> |
| <p>简介:{{desc}}</p> |
| <p>(数组):{{arrayList}}-----{{arrayList[0]}}</p> |
| <p>(对象取值):{{msg}}-------{{msg.name}}</p> |
| <p>(运算){{1+2*20}}</p> |
| <p>(三目运算符【条件?'符合了':'不符合了'】){{100>90?'符合条件':'不符合条件'}}</p> |
| <p>(标签){{a_url}}</p> |
| <p>( 函数() )</p> |
| </div> |
| |
| </body> |
| <script> |
| |
| var vm = new Vue({ |
| el: '#app', |
| data: { |
| title: 'Vue插值语法:可以存放的类型', |
| desc: 'vue框架提供的插值语法,将数据渲染到对应的变量名中', |
| arrayList:['榆木','玉米'], |
| msg:{name:'duo',age:18}, |
| a_url:'<a href="http://www.baidu.com">点我看美女</a>', |
| |
| } |
| }) |
| </script> |
| </html> |
二、指令
1.什么是指令系统?
在Vue中写在标签属性中的,如v-xx
形式的统称为指令
2.文本指令
指令 |
释义 |
v-html |
让HTML渲染成页面 |
v-text |
标签内容渲染成js变量对应的值 |
v-show |
等于布尔值:为true,标签就显示;为false,标签就不显示(通过样式控制显示不显示) |
v-if |
等于布尔值:为true,标签就显示;为false,标签就不显示(整个标签之间删除,效率低,控制在dom中删除标签) |
v-html
把字符串的内容渲染成标签,写在标签内部
| <h2>v-html</h2> |
| <p v-html="a_url"></p> |
| |
| <script> |
| var vm = new Vue({ |
| el: '#app', |
| data: { |
| a_url: '<a href="http://www.baidu.com">点我看美女</a>', |
| } |
| }) |
| </script> |
v-text
直接把字符串内容渲染在标签内部,等同于插值语法
| <div id="app"> |
| <h2>v-text</h2> |
| <p v-text="a_url"></p> |
| </div> |
| <script> |
| // 配置项 通过key:value的形式配置 |
| var vm = new Vue({ |
| el: '#app', |
| data: { |
| a_url: '<a href="http://www.baidu.com">点我看小狗</a>', |
| } |
| }) |
| </script> |
v-show:显示/隐藏任务
等于布尔值,该标签是否显示,v-show
是通过添加css的样式来控制是否显示:display:none
| <div id="app"> |
| <h2>v-show</h2> |
| <img v-show="show" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px"> |
| |
| </div> |
| |
| <script> |
| // 配置项 通过key:value的形式配置 |
| var vm = new Vue({ |
| el: '#app', |
| data: { |
| show: true, |
| } |
| }) |
| </script> |
v-if:显示/删除任务
等于布尔值,该标签是否显示。其与v-show不同,底层是通过dom删除标签来展示标签的,当布尔值为false时会将整个标签删除(效率较v-show较低)
| <div id="app"> |
| <h2>v-show</h2> |
| <img v-show="show" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px"> |
| <h2>v-if</h2> |
| <img v-if="ifShow" src="https://ddsg-1314792441.cos.ap-shanghai.myqcloud.com/typora/2023-02-14-155321.jpg" alt="" width="200px" height="200px"> |
| |
| |
| </div> |
| |
| <script> |
| // 配置项 通过key:value的形式配置 |
| var vm = new Vue({ |
| el: '#app', |
| data: { |
| show: false, |
| ifShow: false |
| } |
| }) |
| </script> |
当v-show和v-if 对应的布尔值都是false时候,v-show只是将标签隐藏,而v-if是将标签直接删除
3.属性指令
指令 |
释义 |
v-bind |
v-bind:属性名="变量名" |
: |
:属性名="变量名" |
| v-bind:属性名='js变量名' |
| 缩写 |
| :属性名='js变量名' |
标签上的属性可以绑定变量,以后变量变化,属性的值跟着变化
如:
| href、src、name、class、style、height |
4.事件指令
通过v-on来讲事件和标签绑定
指令 |
释义 |
v-on |
触发事件(不推荐) |
@ |
触发事件(推荐) |
@[event] |
触发event事件(可以是其他任意事件) |
语法
| v-on:事件名="函数名",函数必须写在methods的配置项中 |
| 缩写 |
| @:事件名="函数名" |
| <button v-on:click="handleClick">点我看美女 |
| methods:{ |
| 'handleClick':function (){ |
| // alert('美女') |
| console.log(this) // this 就是当前vue实例,就是vm实例 |
| this.show=!this.show |
| }, |
| |
在vue的中,this值得是vue的vm实例,但是当在vm实例中如果又嵌套了一层函数,this的指代有可能不同,注意区分
5.class和style
语法
对于class推荐使用数组来进行绑定
对于style推荐使用对象来进行绑定
案例
| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>Style 和 Class</title> |
| <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> |
| <style> |
| .red { |
| color: rgba(255, 104, 104, 0.7); |
| } |
| .font-20 { |
| font-size: 20px; |
| } |
| .be-bold { |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body> |
| |
| <div id="app"> |
| <p>p标签</p> |
| <div :class="class_obj"> |
| <p>class的p标签</p> |
| </div> |
| |
| <button @click="handleClick">点击放大字体</button> |
| <div :style="style_obj"> |
| <p>style的p标签</p> |
| </div> |
| </div> |
| |
| </body> |
| <script> |
| let vm = new Vue({ |
| el: '#app', |
| data: { |
| |
| class_obj: ['red', 'font-20', 'be-bold'], |
| |
| |
| |
| |
| |
| style_obj: { |
| color: 'red', |
| fontSize: '20px' |
| } |
| |
| |
| }, |
| methods: { |
| handleClick(){ |
| this.style_obj['fontSize']='30px' |
| } |
| } |
| |
| }) |
| </script> |
| </html> |
三、渲染
1.条件渲染
语法
| v-if=条件1 |
| 绑定给标签,如果条件1成立,该标签就显示;如果条件不成立,该标签就不显示 |
| |
| v-else-if=条件2 |
| 绑定给标签,如果条件2成立,该标签就现实;如果条件不成立,该标签就不显示 |
| |
| v-else |
| 绑定给标签,上面条件都不成立,显示这个标签 |
案例
| <div id="app"> |
| <h1>通过分数显示文字</h1> |
| <div v-if="score>=90">优秀</div> |
| <div v-else-if="score>=80&&score<90">良好</div> |
| <div v-else-if="score>=60&&score<80">及格</div> |
| <div v-else>不及格</div> |
| |
| |
| </div> |
| </body> |
| <script> |
| var vm = new Vue({ |
| el: '#app', |
| data: { |
| score: 99 |
| }, |
| }) |
| </script> |
2.循环渲染
语法
| <标签 v-for="item in 数组"> |
| {{item.xxx}} |
| {{item.yyy}} |
| </标签> |
案例
| <div id="app"> |
| <div class="row"> |
| <div class="col-md-6 col-md-offset-3"> |
| <h2 class="text-center">循环渲染</h2> |
| <table class="table table-hover"> |
| <thead> |
| <tr> |
| <th>编号</th> |
| <th>姓名</th> |
| <th>年龄</th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr v-for="item in msg" :class="item.background"> |
| <td>{{item.id}}</td> |
| <td>{{item.name}}</td> |
| <td>{{item.age}}</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| <script> |
| let vm = new Vue({ |
| el: '#app', |
| data: { |
| msg: [ |
| {id: "1", name: "duo", age: 18}, |
| {id: "2", name: "jason", age: 18}, |
| {id: "3", name: "justin", age: 18} |
| ] |
| } |
| }) |
| </script> |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY