maokuvue
Version:
cdvue mvue mvvm framework
59 lines (53 loc) • 1.24 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MvueTest</title>
<script src="../src/mvue.js"></script>
</head>
<body>
<div id="app">
<form>
<label>name:</label>
<input v-model="user.ageStep"/>
</form>
<div :class="dcs">name:{{name}} age:{{ age}}</div>
<p :style="{color: colorStyle}">note:{{note}}. age:{{age}}</p><br/>
<img :src="img" alt="">
<button @click="test(user.ageStep)">button1</button>
</div>
<script>
var mvue = new Mvue({
el: "#app",
data: {
name: "zhouhua",
user: {
ageStep: 2
},
age: 16,
note: "Test mvue",
dcs: 'red',
img: 'https://www.test.com',
colorStyle:'#ffee00'
},
methods: {
test: function (e, addNumber) {
console.log('>>>test:37:~~~test~~~~~~~~~~~~>,%o', addNumber);
this.age += Number(addNumber);
this.dcs = 'yellow';
this.colorStyle = '#ff00ee'
this.img = 'https://upload.jianshu.io/users/upload_avatars/4954358/bd5ad823-fbab-476e-b130-18b953dbf5ea?imageMogr2/auto-orient/strip|imageView2/1/w/96/h/96/format/webp'
}
}
});
</script>
<style>
.red{
color:red;
}
.yellow{
color:yellowgreen;
}
</style>
</body>
</html>