<!-- v-text -->
<div id="d1" style="color: red;">
<h2 v-text="message" ></h2>
<h1 v-text="message+'!'"></h1>
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#d1",
data:{
message:"哈哈哈哈"
}
})
</script>
效果:
<!-- v-html
1、设置元素的innerHtml
-->
<div id="d1">
<!-- <a href='http://www.baidu.com'>哈哈哈</a> -->
<p v-text="inner"></p>
<!-- 哈哈哈 -->
<p v-html="inner"></p>
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#d1",
data:{
inner:"<a href='http://www.baidu.com'>哈哈哈</a>"
}
})
</script>
效果:
写法:有两种
鼠标事件:click、dblclick(双击)、mouseover(移入)、mouseout(移出)
<!-- v-on -->
<div id="d1">
<!-- 两种写法
1、v-on:事件=“事件名”
2、@事件=“事件名”
-->
<button v-on:click="dolt">百度一下</button>
<button @click="dolt">百度一下</button>
<input type="button" value="双击事件" @dblclick="dolt">
<h2 v-cloak @click="chagefood">{{food}}</h2>
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#d1",
data:{
food:"西红柿炒鸡蛋"
},
// 绑定事件的方法
methods:{
dolt:function(){
alert("确定进入百度?")
},
chagefood:function(){
this.food+="好吃的很";
}
}
})
</script>
v-on补充:
补充:
③事件的后面跟上 .修饰符 可以对事件进行限制—-例如:.enter 可以限制触发的按键为回车
<!--
①事件绑定的方法写成函数调用的形式,可传入自定义参数
②定义方法时需要定义形参来接受传入实参
③事件的后面跟上 .修饰符 可以对事件进行限制----例如:.enter 可以限制触发的按键为回车
-->
<div id="app">
<!-- 实参:666 "老铁" -->
<input type="button" v-on:click="dianji(666,'老铁')" value="点击">
<!-- 实参:111 -->
<input type="text" v-on:keyup.enter="huiche(111)">
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#app",
methods:{
// 在方法中定义形参 p1 p2
dianji:function(p1,p2){
console.log("做IT");
console.log(p1);
console.log(p2)
},
//在方法中定义形参 p3
huiche:function(p3){
alert("吃饭了没"+p3)
}
}
})
</script>
<!-- v-show -->
<!--
作用:根据真假来切换元素的显示状态
原理:修改元素display的值(truefalse)
true-显示
false-隐藏
-->
<div id="app">
<img src="./搜索.png" alt="" v-show="display">
<button v-on:click="dis">{{inner}}</button>
</div>
<!-- 引入Vue.js -->
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#app",
// 数据对象
data:{
display:true,
inner:"显示/隐藏"
},
// 事件
methods:{
dis:function(){
this.display=!this.display;
}
}
})
</script>
效果:
3、值为true:元素存在于DOM树中,值为false:元素从DOM树中移除
<!-- v-if -->
<!--
1、作用:根据真假切换元素的显示状态
2、本质:通过操作DOM元素来切换显示状态
3、值为true:元素存在于DOM树中,值为false:元素从DOM树中移除
-->
<div id="app">
<h1 v-if="zhuangtai">哈哈哈哈哈</h1>
<input type="button" value="切换显示状态" @click="qiehuan">
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
zhuangtai:true
},
methods:{
qiehuan:function(){
this.zhuangtai=!this.zhuangtai
}
}
})
</script>
效果:
<div id="app">
<!-- 属性SRC的绑定 -->
<img v-bind:src="imgSrc" alt="">
<!-- 属性title的绑定 -->
<h1 v-bind:title="tle+'!!!'">hahahaha</h1>
<!-- 属性class的绑定 -->
<h1 @click="dianji" v-bind:class="isActive?'active':''">属性类名的绑定</h1>
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
imgSrc:"C:UsersPCDesktopVueVue标签搜索.png",
tle:"哈哈哈哈",
isActive:false
},
methods:{
dianji:function(){
this.isActive=!this.isActive
}
}
})
</script>
效果:
*4、v-for
注意:
<div id="app">
<!-- ------------------------------ -->
<ul>
<li v-for="(item,index) in arr">
{{index+1}}
中国:
{{item}}
</li>
</ul>
<!-- ------------------------------ -->
<!-- 添加按钮 -->
<input type="button" value="添加数据" @click="add" name="" id="">
<!-- 删除按钮 -->
<input type="button" value="移除数据" @click="remove" name="" id="">
<h2 v-for="it in veg">
{{it.name}}
</h2>
</div>
<!-- 引入vue.js -->
<script src="../Vuejs/vue.js"></script>
<!-- js实例 -->
<script>
new Vue({
// 挂载点
el:"#app",
// 数据
data:{
arr:["北京","成都","陕西","上海","南京","重庆"],
veg:[
{name:"番茄炒蛋"},
{name:"干炒牛河"},
{name:"新疆大盘鸡"}
]
},
// 事件
methods:{
add:function(){
this.veg.push({name:"辣子蒜羊血"})//push(内容)--从数组末尾添加
},
remove:function(){
this.veg.shift();//shift()--从数组首位开始移除
}
}
})
</script>
效果:
*5、v-model
注意:
②绑定的数据《—–》表单元素的值
<!--
作用:便捷的获取和设置表单元素的值(双向数据绑定)
注意:
绑定的数据会和表单元素的值相关联
绑定的数据《-----》表单元素的值
-->
<div id="app">
<!-- keyup.enter:键盘事件中的敲击回车键 -->
<input type="button" v-on:click="setK" name="" id="" value="修改message">
<input v-on:keyup.enter="getK" type="text" v-model="message" name="" id="">
<h2 >{{message}}</h2>
</div>
<script src="../Vuejs/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
message:"哈哈哈"
},
methods:{
getK:function(){
alert(this.message)
},
setK:function(){
this.message="我爱你你爱我蜜雪冰城甜蜜蜜"
}
}
})
</script>
效果:
原文地址:https://blog.csdn.net/weixin_45718431/article/details/129296701
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.7code.cn/show_22318.html
如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱:suwngjj01@126.com进行投诉反馈,一经查实,立即删除!
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。