vue表达式-数据绑定-事件绑定
vue表达式-数据绑定-事件绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://vuejs.org/js/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>表达式</h1>
<input type="text" v-model="msg" />
<p>{{msg}}</p>
<p>{{msg.toUpperCase()}}</p><!--表达式-->
<p v-text="msg"> </p><!--textContent-->
<p v-html="msg"> </p><!--innerHtml-->
<h1>指令1 强制数据绑定</h1>
<img v-bind:src="imgUrl" />
<img :src="imgUrl" />
<h1>指令2 事件绑定</h1>
<button v-on:click="click">事件绑定</button>
<button @click="click">事件绑定2</button>
<button @click="click2(msg)">事件绑定3</button><!--直接使用数据模型中的数据-->
</div>
<script type="application/javascript">
var v=new Vue({
el:'#app',
data:{
msg:"<a href='www.jiajiajia.club'>hello</a>",
imgUrl:"http://photo.jiajiajia.club/weblog/2019_06_12/data.png"
},
methods:{
click(){
console.log("test");
},
click2(test){
console.log(test);
}
}
})
</script>
</body>
</html>
fixed
没有一个冬天不可逾越，没有一个春天不会来临。最慢的步伐不是跬步，而是徘徊，最快的脚步不是冲刺，而是坚持。