校园网站如何建立,青岛做网站找哪家好,建设银行U盾不自己弹网站了,泰安房产最新出售信息前言 上篇我分享了关于Vue的入门#xff0c;简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。 一、插值 1.1、文本 1.2、html 1.3、属性 1.4、class、style绑定 1.5、表达式 在Vue的模板语法中#xff0c;插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双…
前言 上篇我分享了关于Vue的入门简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。 一、插值 1.1、文本 1.2、html 1.3、属性 1.4、class、style绑定 1.5、表达式 在Vue的模板语法中插值是一种常用的方式来动态地将数据渲染到视图中。Vue使用双大括号{{}}作为插值的语法标记。 最简单的用法是在模板中直接插入数据值例如 p{{ message }}/p上面的代码将把Vue实例中的message属性的值插入到p元素中。 插值还支持JavaScript表达式你可以在插值中使用表达式来执行计算或调用函数例如 p{{ message.toUpperCase() }}/p上面的代码将把message属性的值转换为大写后插入到p元素中。 另外插值还可以用在HTML属性中例如 a v-bind:hrefurl{{ linkText }}/a上面的代码使用v-bind指令将url属性的值绑定到a元素的href属性上并将linkText属性的值插入到a元素中显示的文本内容中。 需要注意的是在插值中不能使用括号或赋值语句因为插值只接受单个表达式。 总结起来Vue的模板语法中的插值提供了一种简洁而灵活的方式来将数据动态地渲染到视图中可以直接插入数据值也可以使用JavaScript表达式进行计算和函数调用。此外插值还可以用在HTML属性中。 案例 完整代码
!DOCTYPE html
htmlheadmeta charsetutf-8title插值/title!-- 引入vue.js的依赖 --script srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js/script/headbody!-- 定义边界 --div idapph1{{msg}}/h1h6{{msg}}/h6h3演示适用html样式/h3div v-htmlhtmlstr/divh3演示vue 中的属性值/h3input typetext v-bind:valueval /h3演示Class与style绑值/h3span :classf200 v-bind:stylecolorblue二者合为一体/spanh3演示表达式/h3{{str.substr((0,5))}}br /月薪{{number-2000}}br /{{ok ? 好 : 不好}}br /span :ididid商品id/span/div/bodyscript// 绑定边界new Vue({el: #app,data() {return {msg: 七里香的名字很美,htmlstr: span stylecolor:red;雨水/span,val: 输入的值,str: 人生苦短我用Java,number: 19999,ok: false,id: goods_,colorblue: color: blue;,f200: f200}}})/script
/html 二、指令
核心指令 (v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-model v-if|v-else|v-else-if根据其后表达式的bool值进行判断是否渲染该元素 他们只能是兄弟元素 v-else-if上一个兄弟元素必须是v-if v-else上一个兄弟元素必须是v-if或者是v-else-if v-show与v-if类似只是会渲染其身后表达式为false的元素而且会给这样的元素添加css代码styledisplay:none v-for类似JS的遍历 遍历数组: v-foritem in items, items是数组item为数组中的数组元素 遍历对象: v-for(value,key,index) in stu, value属性值,key属性名index下标 v-model用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定根据表单上的值自动更新绑定的元素的值 v-for/v-model一起绑定[多选]复选框和单选框 v-bind插值v-bind指令用于在HTML属性中插入动态的数据。可以简写为:。 img :srcimageSrc上述代码中:src将会把imageSrc变量的值作为src属性的值进行插值。 v-on插值v-on指令用于在HTML事件处理程序中插入动态的方法。可以简写为。 button clickhandleClickClick Me/button上述代码中click将会将handleClick方法插入到click事件处理程序中。 v-html插值v-html指令用于将数据作为原始HTML插入到元素中。 div v-htmlhtmlString/div上述代码中htmlString变量的值将会被作为原始HTML插入到div元素之中。 v-text插值v-text指令用于替代双大括号插值将指定的数据直接作为文本内容插入到元素中。 p v-textmessage/p上述代码中message变量的值将会作为p元素的文本内容。 注意重点面试考题 区别v-if与v-show v-ifv-if指令根据条件表达式的值来控制元素的存在与否。当条件为true时元素会被添加到DOM中当条件为false时元素会被从DOM中移除。它是惰性的在条件变为true时才会进行渲染可以避免不必要的DOM操作。 div v-ifisShownThis is shown/div当isShown为true时div元素会被渲染到视图中当isShown为false时div元素不会被渲染。 v-showv-show指令根据条件表达式的值来控制元素的显示或隐藏但不会对DOM结构进行改变。当条件为true时元素会以CSS的方式进行展示当条件为false时元素会以CSS的方式隐藏。即使在条件为false时元素仍然存在于DOM中只是在视觉上被隐藏了。 div v-showisShownThis is shown/div当isShown为true时div元素会以可见的方式展示当isShown为false时div元素通过display: none隐藏但仍然在DOM中存在。 区别总结 v-if根据条件决定元素是否存在于DOM中惰性渲染。v-show根据条件决定元素的显示与隐藏通过CSS控制。 一般而言如果需要在条件变化频繁的情况下切换元素的显示与隐藏或者初始渲染时元素可能不会被显示的情况下推荐使用v-show。而如果需要在条件改变时有更高的渲染开销或避免初始化时不必要的渲染使用v-if更为合适。 案例 代码
!DOCTYPE html
htmlheadmeta charsetutf-8title指令/titlescript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.0/vue.js/script/headbody!-- 定义边界 --div idapph3演示v-if 使用/h3请输入成绩1-100 input typetext v-modeldegree stylecolor: red; /div v-ifdegree60等级E/divdiv v-else-ifdegree70等级D/divdiv v-else-ifdegree80等级C/divdiv v-else-ifdegree90等级B/divdiv v-else-ifdegree100等级A/divdiv v-else输入成绩不合法/divh3演示v-show 与 v-if区别/h3div v-showokshow/divdiv v-ifokif/divh3演示v-for/h3selectoption v-forh in hobby :valueh.id{{h.name}}/option/selectdiv v-forh in hobbyinput :valueh.id typecheckbox /{{h.name}}/div/div/bodyscriptnew Vue({el: #app,data() {return {degree: 78,ok: false,hobby: [{id: 1,name: 乒乓球},{id: 2,name: 滑板},{id: 3,name: 跑步}],};}})/script
/html 三、过滤器 过滤器 全局过滤器 Vue.filter(filterName, function (value) { // value 表示要过滤的内容 }); 局部过滤器 new Vue({ filters:{filterName:function(value){}} }); vue允许你自定义过滤器被用作一些常见的文本格式化格式如下 !-- 在两个大括号中 -- {{ name | capitalize }} !-- 在 v-bind 指令中 -- div v-bind:idrawId | formatId/div 注1过滤器函数接受表达式的值作为第一个参数 注2过滤器可以串联 {{ message | filterA | filterB }} 注3过滤器是JavaScript函数因此可以接受参数 {{ message | filterA(arg1, arg2) }} 注4js定义一个类 function Stu(){}; Stu.prototype.add(a,b){};//添加一个新的实例方法 Stu.update(a,b){};//添加一个新的类方法 四、计算属性、过滤器 计算属性 计算属性可用于快速计算视图View中显示的属性。这些计算将被缓存并且只在需要时更新 computed:{}
