VUE命令

VUE主要包括(v-for,v-on,v-model,v-show,v-bind等)

1.v-model:双向绑定元素,一般用于表单元素。

<div id="itany">

<button v-on:click="alt">按钮<button>

<script src="vue/js/vue.js"></script>

<script>

var vm=new Vue({

el:"#itany",

data:{

msg:"hello"

},

methods:{

alt:function(){

console.log(vm.msg)

}

}

})

</script>

2.v-show:控制元素的显示和隐藏。

<div id="itany">

<h3>{{msg}}</h3>

<h1 v-show="!see">{{msg}}</h1>

</div>

<script src="vue/js/vue.js"></script>

<script>

new Vue({

el:"#itany",

data:{

msg:"hello vue",

see:true

}

})

</script>

3.v-bind:用于绑定属性。

<div id="itant">

<img v-bind:src="url" alt="">

</div>

<script src="vue/js/vue.js"></script>

<script>

new Vue({

el:"#itant",

data:{

url:"images/3.jpg"

}

})

</script>

4.v-if或v-else或v-else-if

<div id='itany'>

<p v-if='num==0'>00000000000</p>

<p v-else-if='num==1'>1111111111</p>

<p v-else-if='num==2'>22222222</p>

<p v-else-if='num==3'>22222222</p>

<p v-else-if='num==4'>22222222</p>

<p v-else='num==5'>555555555555</p>

</div>

<script src='js/vue.js'></script>

<script>

new Vue({

el:'#itany',

data:{

// num:Math.floor(Math.random()(max-min+1)+min) 随机数的计算公式

num:Math.floor(Math.random()(5-0+1)+0) |

}

})

</script>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 深入响应式 追踪变化: 把普通js对象传给Vue实例的data选项,Vue将使用Object.defineProp...
    冥冥2017阅读 4,908评论 6 16
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 2,268评论 0 6
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,088评论 0 29
  • # 传智播客vue 学习## 1. 什么是 Vue.js* Vue 开发手机 APP 需要借助于 Weex* Vu...
    再见天才阅读 3,685评论 0 6
  • 当我接送孩子上学放学,扫地洗碗的时候日子悄不留神就从那些碎缝隙了溜走了,一等回过神来的时候,细碎的小皱纹爬到眼脸,...
    原草0510阅读 288评论 0 0