事件

    

    
{{msg}}

image

v-model:="" 双向数据交互，多用于表单

我是按钮



new Vue({

el:"#app",

data:{

txt:'js'

        },

methods:{

alt:function(){

alert("我是弹窗")
}

})

QQ拼音截图未命名.png

QQ拼音截图未命名.png

v-on:事件="函数名"

QQ拼音截图未命名.png

点击图片能够切换图片
v-bind 用于绑定属性

    
对
    
错
    点击切换
    

QQ拼音截图未命名.png

点击按钮隐藏红色方块
v-show 显示隐藏，用display:none来隐藏元素

v-if

    
00000000
    
111111111
    
22222222
    
3333333
    
44444444
    
555555

v-if控制元素的显示与隐藏，但与v-show不同的是，v-if、v-else、v-else-if是使用visibity:hidden；v-if显示隐藏是将dom元素整个添加或删除
v-if,v-else,v-else-if 于原生js一样

display:none与visibity:hidden的区别：

display:none是将元素完全隐藏，并且元素不占用页面空间，所占空间会被其它元素占用，功能完全消失（不保留物理空间）
visibity:hidden是将元素隐藏，所占用空间不变，只是不显示元素，功能完全消失（保留物理空间）