<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
</head>
<body>
<div id="test1">
<h2>局部指令</h2>
<h3>data绑定的value不是写在标签里,这是写在自定义指令的等号右边</h3>
<p v-upper-text="value"></p>
<h2>全局指令</h2>
<p v-lower-text="value"></p>
</div>
<script src="../js/vue.js"></script>
<script>
// 全局指令
Vue.directive('lower-text',function (el,binding) {
el.innerHTML = binding.value.toLowerCase();
})
new Vue({
el:'#test1',
data:{
value:'Just Do It!!!'
},
// 局部指令 只在 test1下有效
directives:{
'upper-text':function (el,binding) {
console.log(el,binding);
el.innerHTML = binding.value.toUpperCase();
}
}
})
</script>
</body>
</html>