vue给span文本赋值（vue对象类型赋值问题set get）

本文目录

• vue对象类型赋值问题set get
• vue.js 结构赋值--对象
• 如何利用Vue.js库绑定HTML标签内的class属性值
• vue2 怎么把获取到的图片名赋值到文本框里
• vue开发中使用span替代input输入，兼容IE
• vue 为已有对象赋值多个新属性的方法
• vue在函数里给变量赋值，用别的函数获取不到新赋的值，只有给变量赋值的函数可以获取到是怎么回事

vue对象类型赋值问题set get

在vue中，如果你在初始data里定义一个对象，然后例如ajax后去赋值这个对象，直接用=的方法，是不生效的，那如何去实现呢 vue官方解决方法

vue.js 结构赋值--对象

（一）对象解构赋值
1.等号左边与右边必须都是数组，数组的解构赋值要一对应，如果对应不上的话就是underfind

***隐藏网址***

如何利用Vue.js库绑定HTML标签内的class属性值

第一步，创建静态页面vtext.html，修改title显示的内容并引入vue.js，
第二步，在body标签元素内插入两个span元素，在第一个span绑定v-text指令，第二个span中插入{{message}}，
第三步，编写JS代码，绑定数据源message，
第四步，预览静态页面vtext.html，发现{{message}}还是一样，未变成赋的值，
第五步，在两个span外层添加一个div，并将第一个span的id赋给div，再在第一个span标签上绑定v-model，
第六步，再次预览发现页面中的{{message}}变为绑定的数据源.

vue2 怎么把获取到的图片名赋值到文本框里

　　1.在components 目录下新建一个validate.js：
　　export default{
　　install(Vue){
　　Vue.prototype.$myName = "zhagngsan";
　　}
　　}
　　这就是我们的插件，定义了一个属性
　　2.入口文件jssrc/index.js 加入：
　　// 引入
　　import validate from "./../components/validate";
　　// 使用
　　Vue.use(validate);
　　3.我们到user-username.vue 组件下验证一下:
　　mounted(){
　　alert(this.$myName);
　　},
　　浏览器访问登录页面，成功弹出：
　　这里写图片描述
　　4.刚刚我们已经学会插件里定义属性，马上来学一下如何定义方法：
　　export default{
　　install(Vue){
　　// Vue.prototype.$myName = "zhagngsan";
　　Vue.prototype.checkUserName = (value) =》 {
　　if(/\w{6,20}/.test(value)){
　　return true;
　　}else{
　　return false;
　　}
　　}
　　}
　　}
　　同样可以使用该方法：
　　if(this.checkUserName("hello")){
　　alert("ok");
　　}else{
　　alert("error");
　　}
　　5.
　　这里写图片描述
　　我们修改user-name.vue 组件，来实现文本框验证：
　　《template》
　　《div class="form-group"》
　　《label class="col-sm-2 control-label"》用户名《/label》
　　《div class="col-sm-10"》
　　《input type="text" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username"》
　　《label class="label label-danger" v-if="showErrorLabel"》用户不合法《/label》
　　《/div》
　　《/div》
　　《/template》
　　《script》
　　export default{
　　props:,
　　data:function () {
　　return {
　　username:"",
　　showErrorLabel:false,
　　}
　　},
　　methods:{
　　userNameChange(){
　　// 用户名改变的方法里判断 用户名是否复合要求
　　if(this.checkUserName(this.username)){
　　this.showErrorLabel = false; // 如果验证没有通过就显示错误提示
　　}else{
　　this.showErrorLabel = true;
　　}
　　// 调用父组件的方法
　　this.$emit("childChange","username",this.username)
　　}
　　}
　　}
　　《/script》
　　这里写图片描述
　　自定义指令
　　文档：
　　1、validate.js:
　　export default{
　　install(Vue){
　　// Vue.prototype.$myName = "zhagngsan";
　　Vue.prototype.checkUserName = (value) =》 {
　　if(value == ""){
　　return true; // 如果没有填写,默认为true
　　}
　　if(/\w{6,20}/.test(value)){
　　return true;
　　}else{
　　return false;
　　}
　　}
　　Vue.directive("uname",{
　　bind(){
　　console.log("bind"); // 只会调用一次
　　},
　　update(el,binding,vnode){
　　console.log(el);
　　console.log(binding);
　　console.log(vnode);
　　},
　　})
　　}
　　}
　　2、我们自定了一个uname 指令，下面来看一下如何使用的？
　　《input type="text" v-uname="username" v-model="username" v-on:change="userNameChange" class="form-control" :placeholder="username"》
　　我们在组件的模板里使用了 v-uname ，并且给绑定了”username”数据。
　　我们打开浏览器的控制台：
　　这里写图片描述
　　说明我们定义的指令里，这个方法执行了：
　　bind(){
　　console.log("bind"); // 只会调用一次
　　},
　　3、下面我们来看一下update 里的东东
　　update(el,binding,vnode){
　　console.log(el);
　　console.log(binding);
　　console.log(vnode);
　　}

vue开发中使用span替代input输入，兼容IE

也就是说当元素设置 contenteditable 为true 那么当前元素可

注意：此时该元素获取焦点时，该元素就可以进行，和输入框一样的效果，但是它的值不是value而是innerText/innerHtml

在canvas上绘制文字时，我们需要实时绘制当前输入内容，刚开始使用场景是利用动态创建input元素，input获取焦点输入文字，当input失去焦点时绘制当前input的内容，功能可以实现，唯一不足就是我们需要输入框的大小按照输入内容的长度改变，使用input明显不太方便，可以使用动态改变size属性，如果输入的字母，数字，符合可以实现，当时如输入汉字的就会有问题，我们知道span等行内元素可以根据文字长度改变元素大小，所以，我们使用动态创建span标签，设置contenteditable="true",然后设置相应的样式，就可以模仿input输入框的效果

vue 为已有对象赋值多个新属性的方法

有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新属性不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的属性一起创建一个新的对象。

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

vue在函数里给变量赋值，用别的函数获取不到新赋的值，只有给变量赋值的函数可以获取到是怎么回事

这个涉及到低层的原理，简单说就是异步！你如果知道异步那这个就不是问题，如果不知道那简单说下：就是你在数据处理时，下面的传参函数就已经执行了，此时，你的赋值函数还没有处理完，自然就没有值，你的传参函数和赋值函数两个是同时进行的，传参函数在没有拿到预期结果前就已经执行完毕了。
解决办法；异步的东西最好都放在一个函数里执行，或者在赋值函数里去调用外部的函数。监听无效