<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>dome6</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div id="dome">
<!-- 属性绑定 -->
<input type="text" v-bind:value="bind"><br>
v-bind的简写:<input type="text" :value="bind">
<p>{{bind}}</p>
<!-- 双向绑定 -->
<input type="text" v-model:value="model"><br>
v-model的简写:<input type="text" v-model="model">
<p>{{model}}</p>
<!-- 事件绑定 -->
<button v-on:click="von">我被点了{{on}}次</button>
<button @click="von">简写版被点了{{on}}次</button>
<!-- 使用v-bind:进行绑定后,即可渲染无需添加大括号 -->
<p v-bind:class="vclass">{{vdata}}</p>
<!-- : 是 v-bind: 的简写 -->
<p :class="vclass">{{vdata}}</p>
</div>
</body>
<script src="js/index.js"></script>
<script src="js/vue.js"></script>
</html>
window.onload = function(){
new Vue({
el: "#dome",
data: {
bind: '我是属性绑定',
model: '我是双向绑定',
on: 0,
vdata: '我修改了字体颜色',
vclass: 'color'
},
methods: {
von() {
this.on += 1
}
}
})
}
.color{
color:red;
}
834
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
