vue
weixin_汪汪
有起点无终点
展开
-
使用components结合template模板创建树
<div id="app"> <p>{{city}}</p> <my-heder></my-heder> </div> <script> var cityname = { template: '<a style="color:red">大写城市CQ</a>' } var myheder = { template: '<p>子组件&l..原创 2020-10-28 13:45:52 · 93 阅读 · 0 评论 -
自定义事件$on(eventName) 监听事件,使用 $emit(eventName) 触发事件
#自定义事件 关键字: #$emit(‘ic’)自定义事件名 component methods funciton <div id="button-event"> <p>{{city}}</p> <button-add v-on:ic="cqyb"></button-add> <button-add v-on:ic="cqyb"></button-add> </div> <script>原创 2020-10-27 10:21:38 · 376 阅读 · 0 评论 -
watch监听属性
1.watch方法调用,写法1 <body> <div id="app"> 千米:<input type="text" v-model="one"/> 米:<input type="text" v-model="two"/> <p>{{watching}}</p> </div> </body> <script type="text/javascript"> va原创 2020-10-23 11:19:55 · 154 阅读 · 0 评论 -
v-for
for 模板循环 <div id="app"> <h1>模板中使用 v-for:</h1> <ol> <template v-for="site in i"> <!-- 模板中使用 v-for --> <li>模板循环: {{ site.name }} </li> <li>----------</li>原创 2020-10-19 13:57:02 · 87 阅读 · 0 评论 -
v-if表达式的值改变时,将某些行为应用到 DOM 上
v-if表达式判断 v-if:表达式的值改变时,将某些行为应用到 DOM 上 <div id="app"> <p v-if="reen">如果reen布尔为真,我会显示在这里<p> </div> <script> new Vue({ el:'#app', data:{ reen:true } }) </script> 执行效果: ...原创 2020-10-16 14:21:47 · 786 阅读 · 1 评论 -
Vue中实现文本框与标签的双向绑定
1.Vue中实现文本框与标签的双向绑定 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>v-model用来对 input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值。</title> </head> <script src="js/vue.js"原创 2020-10-15 13:58:46 · 3189 阅读 · 1 评论