<script>
var app = new Vue(
{
el: '#app',//vue框架作用于该app节点内(关联的作用)
//数据区域 el,data,methods是固定写法。
data:
{
accout: 'admin',
password: null,
face: 'images/default_face.png'
},
//方法区域 而内部的变量和方法名是可以随意取。
methods:
{
showValue()
{
alert(this.accout);
},
showImg(e)
{
var vueThis = this; //因为this只能被一级方法访问,如:showValue,showImg等,不能被这些方法的子方法直接访问
//所以为了在function子方法中 使用this提取face变量进行更改,所以这里用一个变量临时保存
var v = e.target.files[0]; //得到用户选择的文件
var reader = new FileReader(); //把它转为base64编码
reader.readAsDataURL(v); //开始对变量 v(更换的用户文件) 进行转码
reader.onload = function (r) //转码完成后,就执行这个方法,把更换的文件数据(base64)赋值给face变量
{
vueThis.face = r.target.result;
}
}
}
}
)
</script>
<div id="app">
<input type="text" v-model="accout">
<button @click="showValue">点我弹出你的用户名</button>
<img :src="face"> <!-- img:src 图片变量 后面选择后会变化 -->
<input type="file" @change="showImg">
</div>
el,data,methods是固定写法,而data,methods内部的变量和方法名是可以随意取。
1.el: ‘#app’, //vue框架作用于该app节点内(关联的作用)
2.data:{}, //数据区域
3.methods{}, //方法区域
在方法区域(methods)的方法的子方法中使用this调用数据变量
showImg(e)
{
var vueThis = this;
var v = e.target.files[0]; //得到用户选择的文件
var reader = new FileReader(); //把它转为base64编码
reader.readAsDataURL(v); //开始对变量 v(更换的用户文件) 进行转码
reader.onload = function (r) //转码完成后,就执行这个方法,把更换的文件数据(base64)赋值给face变量
{
vueThis.face = r.target.result;
}
}
以上 var v = vueThis = this
因为this只能被一级方法访问,如:showValue,showImg等,不能被这些方法的子方法直接访问
所以为了在function子方法中 使用this提取face变量进行更改,所以这里用一个变量临时保存