手机网站怎么布局,河南省建设工程网站,建设婚介网站,wordpress 开启缩略图文章目录 常用指令 常用指令
指令: HTML 标签上带有 “v-” 前缀的特殊属性#xff0c;不同指令具有不同含义。例如: v-if, v-for…
常用指令#xff1a; v-bind#xff1a;为 HTML 标签绑定属性值#xff0c;如设置 href#xff0c;css 样式等
a v-bind:href不同指令具有不同含义。例如: v-if, v-for…
常用指令 v-bind为 HTML 标签绑定属性值如设置 hrefcss 样式等
a v-bind:hrefurl测试/a可以简写为
a :hrefurl测试/av-model在表单元素上创建双向数据绑定
input typetext v-modelurl为其绑定数据模型
script
new Vue({el: #app ,data: {url: https://www.baidu.com}
})
/script注意通过 v-bind 或者 v-model 绑定的变量必须在数据模型中声明。
代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVUE-快速入门/titlescript srcjs/vue.js/script
/head
bodydiv idappdivinput typetext v-modelmessage{{message}}/divdiva :hrefurl链接/ainput typetext v-modelurl //div/div
/body
script// 定义 Vue 对象new Vue({el: #app, // Vue 接管区域data: {message: Hello VUE,url: https://www.baidu.com}})
/script
/htmlv-on为 HTML 标签绑定事件v-click、v-blur、v-focus
input type button value点我 v-on:clickhandle()可以简化为
input typebutton value 点我 click handle()script
new Vue({el: #app,data: {//...},methods: {handle: function(){alert(我被点去了);}}
})
/scriptv-if添加性的渲染某元素判断为 true 时渲染否则不渲染
年龄{{age}},经判定为:
span v-ifage 35年轻人/span
span v-else-ifage 35 age 60中年人/span
span v-else老年人/spanv-show根据条件展示某元素区别在于切换的是 display 属性 的值
年龄{{age}},经判定为:
span v-showage 35年轻人/spanv-for列表渲染遍历容器的元素或者对象的属性
div v-foraddr in addrs{{addr}}/divdiv v-for (addr,index) in addrs{{index 1}} : {{addr}}/divdata: {addrs: [北京,上海,广州 深圳, 成都,杭州]
},
