无锡公司网站建设电话,海南政策最新消息,抖音seo,wordpress小程序详解如果阅读有疑问的话#xff0c;欢迎评论或私信#xff01;#xff01; 本人会很热心的阐述自己的想法#xff01;谢谢#xff01;#xff01;#xff01; 文章目录 模板语法前言文本插值原始HTML属性Attribute绑定动态绑定多个值 模板语法
前言
Vue 使用一种基于 HTML… 如果阅读有疑问的话欢迎评论或私信 本人会很热心的阐述自己的想法谢谢 文章目录 模板语法前言文本插值原始HTML属性Attribute绑定动态绑定多个值 模板语法
前言
Vue 使用一种基于 HTML 的模板语法Vue的所有语法都是合法的HTML代码都可以被浏览器正常解析。并且在使用Vue提供的模板时Vue底层还会提供编译优化使用最少的渲染速度。
文本插值
Vue语法中通过双大括号对页面中指定位置渲染数据并且数据是响应式数据。例如前面代码中
div idapp{{ message }}/div原始HTML
上面通过双大括号插入的值是纯文本形式若想添加HTML代码可以通过v-html指令。例如
templateh1练习/h1p这是html代码{{ htmlDisplay }}/ppspan v-htmlhtmlDisplay/span/p
/templatescriptexport default{data(){var htmlDisplay h2这里是使用v-html渲染的结果/h2;var imgSrc /src/components/icons/newImg.gifreturn {htmlDisplay,imgSrc}}}
/script注意v-html属性所在标签中不可有任何内容否则将会报错v-html will override element children.例如 pspan v-htmlhtmlDisplaya href/a/span
/p其中a标签引起的控制台错误 属性Attribute绑定
Vue中使用v-bind绑定属性值即标签的src、id、class等属性。该属性由于过于常用Vue还设置了语法糖:id的形式根据文档可以看出应该注意两个点 对于v-bind绑定数字或者字符串等数据时当值为null或者undefined时该属性将会被忽略。 templateimg :srcimgSrc
/templatescriptexport default{data(){var imgSrc /src/components/icons/newImg.gif;//正常显示var imgSrcNull null;//元素标签中不存在src属性var imgSrcUndefined undefined;//元素标签中不存在src属性var imgSrcEmpty ; //src(unknow)return {imgSrc,imgSrcNull,imgSrcUndefined,imgSrcEmpty}}}
/script对于v-bind绑定布尔值时只有值为假值时才会等于false而真值和空字符串时均为真值。 templatebutton :disabled disableEmpty123/button
/templatescriptexport default{data(){var disableEmpty ;//按钮中存在disabled属性并且按钮无法选中return {disableEmpty}}}
/script动态绑定多个值
绑定多个值时也需要使用v-bind属性和绑定单个值有一点不同 不再需要设置引号右边的属性名以及:直接在对象中设置 templateh1 v-bindobjAttr练习/h1
/templatescriptexport default{data(){var objAttr {id:123,class:a} //h1标签中id为123class属性为areturn {objAttr}}}
/script
