服务器和网站的关系,钟祥建设局网站,微信支付服务商平台,网站建设导向一、内容渲染指令 1.v-text#xff1a;操作纯文本#xff0c;用于更新标签包含的文本#xff0c;但是使用不灵活#xff0c;无法拼接字符串#xff0c;会覆盖文本#xff0c;可以简写为{{}}#xff0c;{{}}支持逻辑运算。
用法示例#xff1a;
//把name对应的值渲染到…一、内容渲染指令 1.v-text操作纯文本用于更新标签包含的文本但是使用不灵活无法拼接字符串会覆盖文本可以简写为{{}}{{}}支持逻辑运算。
用法示例
//把name对应的值渲染到第一个标签中
p v-textname/p
p{{name}}/p 2.v-html用于操作html标签会将其当html标签解析后输出
bodydiv idappp v-htmlname/p/divscript typetext/javascriptlet appnew Vue({el:#app,data:{name:strongZhangsan/strong} })/script
/body
二、属性绑定指令 1.v-bind动态属性绑定属性值可以是srctitleclasshref等bind的属性对应data中的变量简写是:
用法示例
el-form v-bind:modeldataForm/el-form
el-form :modeldataForm/el-form
三、事件绑定指令 1.v-on可以绑定事件的监听器,简写是
用法示例
button clickadd/button
四、双向绑定指令 1.v-model通常用于表单的组件绑定例如input、select等。它用于实现表单组件的双向绑定表单控制件以外的标签没有用
用法示例
el-form-item label姓名 propname }el-input v-modeldataForm.name placeholder输入姓名 clearable /el-input
/el-form-item
五、条件渲染指令 1.v-show指令的取值为true/false分别对应着显示/隐藏。原理动态为元素添加或移除 displaynone样式来实现元素的显示和隐藏如果要频繁的切换元素的显示状态用v-show会更好 。 2.v-if取值为true/false控制元素是否需要被渲染(展示)。原理每次动态创建或移除元素实现元素的显示和隐藏如果刚进入页面的时候某些元素默认不需要被展示而且后期这个元素很可能也不需要被展示出来此时v-if性能更好。 3.v-else和v-if指令搭配使用没有对应的值当v-if的值为false时v-else才会被渲染出来。
v-if可以单独使用或者配合v-else指令一起使用
div v-ifMath.random()10随机数大于10
/div
div v-else随机数小于10
/div注意v-else指令配合v-if使用才会被识别。
