<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue指令</title>
</head>
<body>
<div id="app">
<p>{{ msg }}</p> <!-- 这个有闪现-->
<p v-text = 'msg'></p>
<p v-html = 'msg2'></p> <!--用于解析html 代码-->
<!-- <input type="button" value="按钮" v-bind:title="mytitle"> -->
<!-- 缩写为如下格式 -->
<input type="button" value="按钮" :title="mytitle">
<!-- 鼠标点击事件 -->
<input type="button" value="按钮2" v-on:click = 'show'>
<input type="button" value="按钮2(简写版)" @click = 'show'>
<!-- 鼠标触碰事件 -->
<input type="button" value="按钮3" v-on:mouseover = 'show2'>
</div>
<script src="../js/vue-2.4.0 .js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
msg: '成功了',
msg2: '<h3>哈哈哈哈哈哈<h3>',
mytitle: '我是mytitle'
},
methods:{ // 这只是一个对象
show: function(){
alert('点击触发弹窗')
},
show2: function(){
alert('触摸触发弹窗')
}
}
})
</script>
</body>
</html>
Vue中v-text,v-html,v-bind,v-on:click/@click 事件
最新推荐文章于 2024-03-22 16:10:59 发布