<div id="mydiv">
用户名:<input type="text" v-model="username"/>
<h3>{{username}}</h3>
<!--以文本方式显示属性值-->
<h3 text="mytext"></h3>
<!--以html方式显示属性值-->
<h3 v-html="mytext"></h3>
<!--绑定 src 属性, 两种方式:v-bind:src或者:src-->
<img v-bind:src="mysrc"/>
<img :src="mysrc"/>
<!--绑定点击事件两种方法:v-on:click 或者直接 @click-->
<input type="button" value="点我" v-on:click="myclick()"/>
<input type="button" value= "other" @click="myclick"/>
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript">
new Vue({
el:"#mydiv", //选择器
data:{
username:"张三",
mysrc:"d:/test.png",
mytext:"<a href='https://www.baidu.com'>baidu.com</a>"
},
methods:{
myclick(){
alert("你好");
},
}
});
</script>
vue.js 第一课
最新推荐文章于 2024-04-19 00:17:37 发布