一、绑定元素
1.使用v-bind:属性名 == :属性名
举例:
<a v-bind:href="http">访问链接</a>
2.绑定事件
(1)v-on:事件 == @事件
注:事件名称一定不要加on
举例:
<button v-on:click="func1(1)">点击1</button>
<button @click="func1(2)">点击2</button>
(2)
<h1 :class="sty">我现在点击的是{{num}}</h1>
<h1 :style="boss[0]">绑定样式style</h1>
(3)
data(){
return{
userName:"张三",
http:"http://www.baidu.com",
https:"https://v2.cn.vuejs.org/v2/api/#methods",
num:"",
sty:"",
// boss:"border:5px solid orange;color:green;"
// boss:{
// border:"5px solid orange",
// color:"pink",
// // textAlign:"center"
// "text-align":"right"
// }
boss:[
{
border:"5px solid pink"
},
{
color:"red"
}
]
}
},
3.methods处理的函数方法
methods: {
func(){
console.log(1111111);
return 1111111;
},
func1:function(user){
if(user==1){
this.num = 1;
this.sty = "box1";
console.log(222222222);
}else {
this.num = 2;
this.sty = "box2"
console.log(333333333);
}
},
// func1:()=>{
// console.log(111111111);
// console.log(this);
// console.log(this.userName);
// this.num = 1;
// this.sty = "box1";
// console.log(222222222);
// },
func2(){
this.num = 2;
this.sty = "box2"
console.log(333333333);
}
},
})