<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>vue事件绑定</title>
</head>
<body>
<div id="app">
<!-- v-show作用：用来控制页面中标签元素是否展示，底层通过控制元素的display属性来进行标签的显示和不显示来控制-->
<!-- v-show作用：用来控制页面中标签元素是否展示，底层通过控制对DOM树节点添加和删除来进行控制标签的显示和不显示-->
<!-- v-bind作用：用来给页面中标签元素绑定相应的属性-->
<h1 v-show="true">v-show1设置为显示</h1>
<h1 v-show="false">v-show1设置不为显示</h1>
<h1 v-show="wx">v-show2设置为不显示</h1>
<h2 v-if="true">xiaowen很单纯</h2>
<input type="button" value="点我显示隐藏标签" @click="showHide">
<hr>
<img width="300px" title="小浣熊" v-bind:src="src">
<input type="button" value="点我改变图片" @click="changesrc('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607687795628&di=cc20ad07fbd4eb51a9dfccd63773a918&imgtype=0&src=http%3A%2F%2Fa00639y.demo.guanwangyun.com%2Fstatic%2Fupload%2Fa00639y%2Falbum%2F20161220151642_57285.jpg')">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app=new Vue({
el:"#app",
data:{
msg:"你好",
age:1,
wx:false,
src:"https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=444497446,2189364895&fm=26&gp=0.jpg"
},
methods:{
//methods，定义vue事件
showHide(){
this.wx=!this.wx;
},
changesrc(src){
this.src=src;
}
}
})
</script>
</body>
</html>
Vue—v-if+v-show+v-bind的使用
猜你喜欢
转载自blog.csdn.net/dgssd/article/details/111045758
今日推荐
周排行