初学入门vue
程序员文章站
2022-03-29 20:16:15
vue MVVM实例vue
...
vue MVVM
实例
<!DOCTYPE html>
<html>
<head>
<title>vue</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- input标签显示data数据 -->
<input type="text" v-model="wenzi">
<!-- p标签显示data数据 -->
<p>{{wenzi}}</p>
<p v-text="wenzi"></p>
<!-- p标签显示data数据，可以编译html标签 -->
<p v-html="wenzi"></p>
<img :src="wangzhi">
<!--vue绑定监听-->
<button @click="test(wenzi)" style="width: 100px;height: 50px"> 点我</button>
</div>
<script type="text/javascript">
/*vue实例,viewmodel*/
new Vue({
el : '#app', //作用域
/*model*/
data : {
wenzi:"<a> Hello world!</a>",
wangzhi:"https://csdnimg.cn/cdn/content-toolbar/csdn-logo.png?v=20200416.1"
},
methods : {
test(content){
alert(content);
}
}})
</script>
</body>
</html>
本文地址：https://blog.csdn.net/weixin_42075821/article/details/107392128