v-bind:属性名=“表达式” 可以简写为 :属性名=“表达式” 假如有这样一个例子
:count=“0”,如果不加:,也就是v-bind ,0代表的就是一个字符串,加上v-bind代表的就是表达式,也就是数字0,换一个说法,如果count=“0+1”,加上v-bind就是1,不加就是0+1,(只是个人理解,欢迎指正)
还有就是用v-bind给子组件传数据,那么子组件就要接收一下
<div id="app">
<son :count="0"></son>
<son :count="1"></son>
</div>
<script>
var son ={
props:['count'],//这就是需要接收的数据
template:"<div>{{count}}</div>>"
}
var vm=new Vue({ //父组件
el:"#app",
components:{
son:son
}
})
如果去掉v-bind,将上面的:count=“0”改成
<son count="0+1"></son>
<son count="1+3"></son>
那么页面显示的就是0+1 和1+3,而不是1和4,大家可以自己试验下
还有父组件传递给子组件的数值,子组件不能去直接修改,应该先复制一个副本,去修改这个副本 ,上代码
var son ={
props:['count'],//这就是需要接收的数据
data:function () { //子组件的data必须是函数
return{
num:this.count //这就是复制的副本
}
},
template:"<div @click='handleClick'>{{num}}</div>>",
methods:{
handleClick:function () {
this.num++ // 要实现的是点击数字往上加1 ,不可以写成this.count++,因为不能直接修改
}
}
}