-
插入文本：v-text 相当于元素的innerText属性，必须是双标签 简写是{{}}
-
插入HTML：v-html 相当于元素的innerHTML属性
-
循环：v-for v-for的使用，除了item属性，还有一些其他的属性，加入现在要循环的对象名字为people：
-
如果people是数组,还有index属性，如v-for="(item,index) in people"
-
如果people是对象,还有value,key属性，如v-for="(value,key,index) in people"
-
根据真假切换元素的显示状态：v-show 本质操作的是display的值
<div id="app">
<input type="button" value="切换显示状态" @click="changeIsShow">
<input type="button" value="累加年龄" @click="addAge">
<img v-show="isShow" src="../img/图片1.webp" alt="">
<img v-show="age>=18" src="../img/图片1.webp" alt="">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
isShow:false,
age:16
},
methods:{
changeIsShow:function(){
this.isShow=!this.isShow;
},
addAge:function(){
this.age++;
}
}
})
</script>
-
为元素绑定属性 缩写冒号: v-bind
-
v-bind:属性名=“常量 || 变量名”，简写形式——:属性名=“常量 || 变量名”
<img v-bind:src="imgSrc" alt="">
- 双向绑定：v-model
<div id="app">
<h4>{{msg}}</h4>
<input type="text " v-model:value="msg" style="width:100% ;">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
msg:'完美'
}
</script>
- 绑定事件：v-on
v-on:click = “方法名 || 直接改变 vue 内部变量”，简写形式——@click = “方法名 || 直接改变 vue 内部变量”
<div id="app">
<input type="button" value="按钮" @click="doIt(666,'老铁')">
<input type="text" @keyup.enter="keyHi">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
},
methods:{
doIt:function(p1,p2){
console.log("做it");
console.log(p1,p2)
},
keyHi:function(){
alert('你好美女');
}
}
})
</script>
