校园网站开发技术,网站改版对用户的影响,聊城质量最好网站建设,wordpress外联插件目录 Vue中的常用指令内容渲染指令条件渲染指令事件绑定指令内联语句事件处理函数调用传参 Vue中的常用指令 概念#xff1a;指令#xff08;Directives#xff09;是Vue提供的带有v- 前缀的特殊标签属性。 vue 中的指令按照不同的用途可以分为如下 6 大类#xff1a; 内容… 目录 Vue中的常用指令内容渲染指令条件渲染指令事件绑定指令内联语句事件处理函数调用传参 Vue中的常用指令 概念指令Directives是Vue提供的带有v- 前缀的特殊标签属性。 vue 中的指令按照不同的用途可以分为如下 6 大类 内容渲染指令v-html、v-text条件渲染指令v-show、v-if、v-else、v-else-if事件绑定指令v-on属性绑定指令v-bind双向绑定指令v-model列表渲染指令v-for
内容渲染指令
内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下2 个 v-text类似innerText 使用语法p v-textunamehello/p意思是将 uame 值渲染到 p 标签中类似 innerText使用该语法会覆盖 p 标签原有内容 v-html类似 innerHTML 使用语法p v-htmlintrohello/p意思是将 intro 值渲染到 p 标签中类似 innerHTML使用该语法会覆盖 p 标签原有内容类似 innerHTML使用该语法能够将HTML标签的样式呈现出来。示例
bodydiv idappdiv v-htmlmsg/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {msg: h2进入百度/h2a hrefhttp://www.baidu.com百度/a}})/script
/body条件渲染指令
条件判断指令用来辅助开发者按需控制 DOM 的显示与隐藏。条件渲染指令有如下两个分别是 v-show 作用 控制元素显示隐藏语法 v-show 表达式 表达式值为 true 显示 false 隐藏原理 切换 display:none 控制显示隐藏场景 频繁切换显示隐藏的场景 v-if 作用 控制元素显示隐藏条件渲染语法 v-if 表达式 表达式值 true显示 false 隐藏原理 基于条件判断是否创建或移除元素节点场景 要么显示要么隐藏不频繁切换的场景
示例 表达式为false时
bodydiv idappdiv v-showflag classboxv-show/divdiv v-ifflag classboxv-if/div/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {flag: false}})/script
/body表达式为true时
v-else 和 v-else-if 作用辅助v-if进行判断渲染语法v-else | v-else-if表达式注意需要紧接着v-if使用
事件绑定指令
使用Vue时如需为DOM注册事件及其的简单语法如下
button v-on:事件名内联语句按钮/buttonbutton v-on:事件名处理函数按钮/buttonbutton v-on:事件名处理函数(实参)按钮/buttonv-on: 简写为 内联语句 语法v-on:事件名内联语句 或事件名内联语句
bodydiv idappbutton v-on:clickcount---/buttonspan{{count}}/spanbutton v-on:clickcount/button/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {count: 0}})/script
/body其中click可以换成其它的事件
等价于
div idappbutton clickcount---/buttonspan{{count}}/spanbutton mouseentercount/button/div
事件处理函数 注意
事件处理函数应该写到一个跟data同级的配置项methods中methods中的函数内部的this都指向Vue实例
语法v-on:事件名处理函数 div idappbutton clickfn切换隐藏/buttonh1 v-showisShowzhezhe/h1/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {isShow: true},methods: {fn() {console.log(执行了函数, app.isShow);this.isShow !this.isShow}}})/script调用传参 如果不传递任何参数则方法无需加小括号methods方法中可以直接使用 e 当做事件对象 如果传递了参数则实参 $event 表示事件对象固定用法。
示例 div idappdiv classboxh3售货/h3button clickbuy(5)铅笔5r/buttonbutton clickbuy(30)钢笔30r/button/divp余额{{money}}元/p/divscript srchttps://cdn.jsdelivr.net/npm/vue2.7.16/dist/vue.js/scriptscriptconst app new Vue({el: #app,data: {money: 100},methods: {buy(price) {this.money - price}}})/script
