尚马day6 Vue

最新推荐文章于 2024-08-23 14:49:37 发布

weixin_57357165

最新推荐文章于 2024-08-23 14:49:37 发布

阅读量56

点赞数

分类专栏： Java Script 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_57357165/article/details/125189683

版权

Java Script 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

vue

框架监听数据

js 版本开发版本

min 版压缩版

导入vuejs

引入vue方式导入在script src="地址"

在vue里调用其他函数需要使用  this.函数名()
v-html指定  把内容显示到元素中 可以解析html标签
checkbox使用数组[]   :value='1'  数字      value='1'  字符串
<body>
    <div id="app">根标签
        <h1>{{mymsg}}</h1>vue相关指令
    </div>
     </body>
let myvue=new Vue({
      el:"#app",每个josn之间逗号隔开 表示监控的是哪个标签
data:{
  mymsg:"abc123";  
}
});    {{差值表达式}}  K带$符号  差值表达式只写入文本
v-html 写入标签   v-html="mysmsg2"

myvue.$data.mymsg='xxxx';改值
Object.defineProperty(myObj,"b",{
    get(){
        
    },
    set(){
        
    }
})
v-bind:value="textDefault"
data:{
textDefault:"jack",
}
更改数据直接找元素数据即可   myvue.textDefault="rose";
更改src 图片  直接  v-bind:src="imgsrc"     imgsrc:"jpg"    
控制按钮 v-bind:disabled="btnStatus"   btnStatus:true,    
如果用的是v-bind可以简写成:属性    找元素属性 使用v-bind:绑定更改
v-if="boolean"   boolean:true  直接注释掉 控制元素在不在
v-if="可以写判断"  v-else-if="可以写判断" v-else="可以写判断"
v-show="boolean" boolean:true  将样式属性改为none
v-on：click="myClick()"简写---->@click="myClick()"
let myVue = new Vue({
 el:"#app",
data:{

},
methods:{
    myClick:function(){   简化-->myClick(){} 对匿名函数的简化
         console.log(this);
     this.btnStatus=true;           vue里面调用函数 this.函数名
     }
   }
});

双向绑定

type="radio" 单选
v-model="xxx"
v-model="gender" value="1"  男
v-model="gender" value="2"  女
{{gender}}差数表达式  选项值会自动映射绑定到数据上

data:{
    gender:"xx"--->value值
},
type="checkbox" 多选
v-model="hobby" value="1"吃
v-model="hobby" value="2"喝
v-model="hobby" value="3"赌  此展示的为字符串"1","3","2"
可使用绑定方法 
v-model="hobby" :value="1"吃  此展示的为数字  1,2
v-model="hobby" :value="2"喝
data:{
    使用数组表达
    hobby:["2","3"]
    hobby:["xxx","xxx"]
},
    v-for="news in newsList" {{news.nesContent}} 遍历元素