Tabla de contenido
Ejemplo: modificar el color de fondo
Primero mire los siguientes ejemplos para revisar el uso de vue
-
<body> <div id="box"> { {myname}} - { {myage}} </div> <script> var vm = new Vue({ el:"#box", data:{ myname:"lyx", myage:26 } }) </script> </body> - El resultado de la operación es el siguiente: el objeto vue se monta en la instancia de vm
- Modificando directamente el nombre del atributo vm. en la consola
Siguiente aprender @click
Puede ver que el formulario @click es una abreviatura de v-on:click
<a v-on:click="doSomething"> ... </a>
<!-- 简写 -->
<a @click="doSomething"> ... </a>
el, datos, atributos de métodos del objeto vue
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 在线导入 -->
<!-- 开发环境版本，包含了用帮助的命令行警告 -->
<script src="../vue/vue.js"></script>
</head>
<body>
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">点我控制台输出</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
myname:"lyx",
myage:26
},
methods:{
handleChange(){
console.log("哈哈哈哈哈哈哈哈哈");
}
}//定义所有事件方法
})
</script>
</body>
</html>Modifique los valores de myname y myage en el método handleChange() y haga clic en el botón para actualizar la página para ver:
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">click me</button>
</div>
<script>
var vm = new Vue({
el:"#box",
data:{
myname:"lyx",
myage:26
},
methods:{
handleChange(){
console.log("哈哈哈哈哈哈哈哈哈");
vm.myname = "xmq";
vm.myage = 22;
}
}//定义所有事件方法
})
</script>Modifique el valor por this.myname, this.myage
El resultado de la operación es el siguiente:
Ejemplo: modificar el color de fondo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 本地导入 -->
<script src="../vue/vue.js"></script>
<style>
.bgRed {
background: #da3939;
height: 100px;
width: 100px;
}
.bgBlue {
background: #4dddd1;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">click me</button>
<div :class="whichcolor"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
myname: "lyx",
myage: 26,
whichcolor: "bgRed"
},
methods: {
handleChange(t) {
console.log("哈哈哈哈哈哈哈哈哈", this);
this.myname = "xmq";
this.myage = 22;
this.whichcolor = "bgBlue";
}
}//定义所有事件方法
})
</script>
</body>
</html>Ejemplo: haga clic en el botón botón repetidamente para cambiar el color de fondo continuamente
El efecto es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 本地导入 -->
<script src="../vue/vue.js"></script>
<style>
.bgRed {
background: #da3939;
height: 100px;
width: 100px;
}
.bgBlue {
background: #4dddd1;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<div id="box">
{
{myname}} - {
{myage}}
<button @click="handleChange()">click me</button>
<div :class="whichcolor"></div>
<br />
<div :class="isColor?'bgRed':'bgBlue'"></div>
</div>
<script>
new Vue({
el: "#box",
data: {
myname: "lyx",
myage: 26,
whichcolor: "bgRed",
isColor: true
},
methods: {
handleChange(t) {
console.log("哈哈哈哈哈哈哈哈哈");
this.myname = "xmq";
this.myage = 22;
this.whichcolor = "bgBlue";
this.isColor = !this.isColor;
}
}//定义所有事件方法
})
</script>
</body>
</html>