Vue

<!DOCTYPEhtml><html><head><metacharset="utf-8"/><title>vue</title></head><body><divid="app"></div><scriptsrc="https://vuejs.org/js/vue.js"></script><script>/*template:用里面的数据去替换掉el找到的dom节点,template里面的数据只能有一个根节点用data里面返回的变量,通过双花括号输出*/newVue({el:"#app",template:`<div><divv-text="text"></div><divv-html="html"></div><divv-if="ifdemo">测试if<br><br></div><divv-if="ifelsedemo==1">测试if和if-else1<br><br></div><divv-else-if="ifelsedemo==2">测试if和if-else2<br><br></div><divv-if="ifelseelse==1">测试if和if-else和else1<br><br></div><divv-else-if="ifelseelse==2">测试if和if-else和else2<br><br></div><divv-else>测试if和if-else和else其他<br><br></div><divv-show="showdemo=='aaa'">测试show<br><br></div><ul><liv-for="iteminfordemo">{{item}}</li></ul><ul><liv-for="(item,index)infordemo">{{item}}--{{index}}</li></ul><ul><liv-for="(value,key,index)infordemo2">{{value}}--{{key}}--{{index}}</li></ul><ul><liv-for="(value,key)infordemo3.data">{{value.name}}--{{value.love}}--{{key}}</li></ul></div>`,data:function(){return{text:"<h1>贰狗</h1>",//输出纯文本html:"<h1>贰狗</h1>",//可以解析html标签ifdemo:true,//判断是否成立例如ifdemo是否为真来决定是否显示ifelsedemo:1,//判断是否成立例如如果ifelsedemo=1显示第一个,ifelsedemo=2显示第二个ifelseelse:3,//判断是否成立例如如果ifelseelse=1显示第一个,ifelseelse=2显示第二个否则显示其他showdemo:'aaa',//判断是否显示fordemo:['小明','李雷','韩梅梅'],//循环出数组和indexfordemo2:{name:'李雷',love:'韩梅梅',baba:'李大雷'},//可以循环出键fordemo3:{data:[{name:'李雷',love:'韩梅梅',baba:'李大雷'},{name:'李雷2',love:'韩梅梅2',baba:'李大雷2'}]}//循环二维数组}}})</script></body></html>

2019-11-20 24 0
2019-11-20 26 0

友情链接申请友链