标签：charset idt 效果 页面 ice info function 字符串 name
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-for指令</title>
</head>
<body>
<div id="app">
<ul>
<li v-for="food in foodList">{{food.name}}:￥{{food.discount? food.price*food.discount : food.price}}</li>
</ul>
</div>
<script src="lib/vue.js"></script>
<script src="js/v-for.js"></script>
</body>
</html>
v-for.js:
var app = new Vue({
el: ‘#app‘,
data: {
//foodList: [‘葱‘, ‘姜‘, ‘蒜‘],
foodList: [
{
name: ‘葱‘,
price: 10,
discount: 0.8,
},
{
name: ‘姜‘,
price: 8,
discount: 0.5,
},
{
name: ‘蒜‘,
price: 7,
}
]
}
});
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bind指令</title>
<style>
.active {
background: plum;
}
</style>
</head>
<body>
<div id="app">
<a :class="{active: isActive}" :href="url">点我
<!--<img v-bind:src="img" >-->
</a>
</div>
<script src="lib/vue.js"></script>
<script src="js/v-bind.js"></script>
</body>
</html>
v-bind.js：
var app = new Vue({
el: ‘#app‘,
data: {
url:‘http://baidu.com‘,
img: ‘../bg.jpg‘,
klass: ‘btn btn-default‘,
isActive: true,
}
});
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-on指令</title>
</head>
<body>
<div id="app">
<button v-on="{mouseenter:onEnter, mouseleave:onOut}" @click="onClick">点我</button>
<form @keyup.enter="onEnter" @submit.prevent="onSubmit">
<input type="text">
<button type="submit">提交</button>
</form>
</div>
<script src="lib/vue.js"></script>
<script src="js/v-on.js"></script>
</body>
</html>
v-on.js:
var app = new Vue({
el: ‘#app‘,
methods: {
onClick: function() {
console.log(‘111‘);
},
onEnter: function() {
console.log(‘mouse enter‘);
},
onOut: function() {
console.log(‘mouse leaver‘)
},
onSubmit:function() {
console.log(‘submited‘)
},
onEnter:function() {
console.log(‘enter‘)
}
}
});
标签：charset idt 效果 页面 ice info function 字符串 name
原文地址：https://www.cnblogs.com/zlinger/p/9573311.html
