广州网站建设哪里买,什么是c2c平台,做网站app要多少钱,网络网站建目录
1、v-on事件
2、按键修饰符
3、显示和隐藏v-show
4、条件渲染v-if 1、v-on事件 创建button按钮有以下两种方式#xff1a;
button v-on:clickedit修改/button
button clickedit修改/button
完整示例代码…目录
1、v-on事件
2、按键修饰符
3、显示和隐藏v-show
4、条件渲染v-if 1、v-on事件 创建button按钮有以下两种方式
button v-on:clickedit修改/button
button clickedit修改/button
完整示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodydiv idapp!-- 插值表达式 --{{ msg }}h1{{web.title}}/h1h2{{web.url}}/h2h1{{number}}/h1button v-on:clickedit修改/button/divscript typemoduleimport {createApp, reactive, ref} from ./vue.esm-browser.js// const {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){const number ref(10)number.value 20const web reactive({title:开始学习vue啦,url:vue.com})const edit () {web.url hhahaha}return{msg:sucess,web,number,edit}}}).mount(#app)// mount为挂载/script
/body
/html 另是es6中的语法。
举例说明
x x 6
相当于
function(x){return x6;
}
2、按键修饰符
回车
回车 input typetext keyup.enteradd(20,50) br
空格
空格 input typetext keyup.spaceadd(10,80) br
Tab键
Tab input typetext keydown.tabadd(5,32) br
按键盘w键
w input typetext keyup.wadd(8,3) br
组合键
CtrlEnter input typetext keyup.ctrl.enteradd(20,50) br
CtrlA input typetext keyup.ctrl.aadd(20,50) br 完整示例代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srcvue.global.js/script --
/head
bodydiv idapp!-- 插值表达式 --{{ msg }}h1{{web.title}}/h1h2{{web.url}}/h2 h2{{web.user}}/h2回车 input typetext keyup.enteradd(20,50) br空格 input typetext keyup.spaceadd(10,80) brTab input typetext keydown.tabadd(5,32) brw input typetext keyup.wadd(8,3) br!-- 组合键 --CtrlEnter input typetext keyup.ctrl.enteradd(20,50) brCtrlA input typetext keyup.ctrl.aadd(20,50) br/divscript typemoduleimport {createApp, reactive} from ./vue.esm-browser.js// const {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){const web reactive({title:开始学习vue啦,url:vue.com,user:0})const add (a,b) {web.user ab}return{msg:sucess,web,add}}}).mount(#app)// mount为挂载/script
/body
/html 3、显示和隐藏v-show
实现的功能当web.title为False隐藏内容当为True显示内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srcvue.global.js/script --
/head
bodydiv idapp!-- 插值表达式 --h1{{web.title}}/h1p v-showweb.title显示的内容/pbutton clickshow切换显示状态/button/divscript typemoduleimport {createApp, reactive} from ./vue.esm-browser.js// const {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){ const web reactive({title:false})const show () {web.title !web.title}return{web,show}}}).mount(#app)// mount为挂载/script
/body
/html 4、条件渲染v-if
通过v-if也可实现上述功能当v-if为True显示内容当为False则不显示只需在上述代码添加以下一行代码即可。
p v-ifweb.titlev-if显示的内容/p
实现的功能当web.user在不同数值段显示不同的内容。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title!-- script srcvue.global.js/script --
/head
bodydiv idapp!-- 插值表达式 --p v-ifweb.user 1000user小于1000/pp v-else-ifweb.user 1000 web.user 2000user小于2000/pp v-elseuser大于2000/p/divscript typemoduleimport {createApp, reactive} from ./vue.esm-browser.js// const {createApp, reactive} VuecreateApp({// setup选项用于设置响应式数据和方法等setup(){ const web reactive({user:500})return{web }}}).mount(#app)// mount为挂载/script
/body
/html
