响应式网站建设准备,网站建设公司logo,江西网站建设公司费用,排版网页设计教程vue会根据不同的指令#xff0c;针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是#xff0c;当表达式的值改变时#xff0c;将其产生的连带影响#xff0c;响应式地作用于 DOM。 1、v-text#xff1a;设置元素的文本内容#xff0c;不会解…vue会根据不同的指令针对不同的标签实现不同的功能。指令是带有 v- 前缀的特殊标签属性。指令的职责是当表达式的值改变时将其产生的连带影响响应式地作用于 DOM。 1、v-text设置元素的文本内容不会解析div标签、样式等 2、v-html 设置元素的innerHTMLv-html“表达式”会解析div标签、样式等 div idappp{{content}}/pp v-htmlcontent{{content}}/pp v-textcontent{{content}}/p/divdata: {content: strongvue使用步骤/strong} 3、v-show通过切换 display:none来控制元素显示还是隐藏v-show 表达式值 true 显示 false 隐藏适合于频繁切换显示隐藏的场景 4、v-if基于条件判断通过创建或移除元素节点来控制元素的显示和隐藏v-if 表达式值 true 显示 false 隐藏适合于显示隐藏切换不频繁的场景 5、v-else/v-else-if配合v-if使用进行链式调用v-else-if表达式v-else。需紧跟v-if使用 div idappp v-ifgender 1性别♂ 男/pp v-else性别♀ 女/phrp v-ifscore 90成绩评定A/pp v-else-ifscore 70成绩评定B/pp v-else-ifscore 60成绩评定C/pp v-else成绩评定D/p/div 6、v-on给元素添加事件监听及处理逻辑v-on:事件名内联语句/methods中的函数名v-on还可简写为如果再模板页面中使用事件对象可以使用$event如果再js中使用事件对象则使用事件处理函数的形参e
div idappbutton clickcount---/buttonspan{{ count }}/spanbutton v-on:clickcount/button
/div div idappbutton clickfnv-on函数名/button/divmethods: {fn () {console.log(v-on函数名)}} 修饰符.stop - 调用 event.stopPropagation() .prevent - 调用 event.preventDefault() .capture - 在捕获模式添加事件监听器 .self - 只有事件从元素本身发出才触发处理函数 .{keyAlias} - 只在某些按键下触发处理函数 .once - 最多触发一次处理函数 .left - 只在鼠标左键事件触发处理函数 .right - 只在鼠标右键事件触发处理函数 .middle - 只在鼠标中键事件触发处理函数 .passive - 通过 { passive: true } 附加一个 DOM 事件。 7、v-bind动态的设置html的标签属性srctitleurl等v-bind:属性名表达式可简写为:属性名表达式
img v-bind:srcimgUrl v-bind:titlemsg alt
img :srcimgUrl :titlemsg altdata: {imgUrl: ./imgs/10-02.png,msg: hello 波仔
}
