Vue 随笔

Posted 2021-03-17 xiangzipeng

一、Vue 在javascript中的声明

var example=new Vue(
{
    el:‘VueId‘,
   data:
{
    item:{}, //声明单个对象
    items:[], //声明集合
},
methods:
{
    Add:function()
{
 
},
Edit:function(id)
{

}
}
})

data: 是数据源  (item 是单对象，items是集合)

methods: 点击@click 或 v-on:click 会触发这里的事件 ( 例如标签<p  @click=‘Add‘ ></p>,就会被触发methods中的Add事件)，而后面的Edit则是带参数的一个事件和前面一样只不过换成Edit(Vue的参数数据)即可

二、Vue绑定数据三目运算符的使用

<!--绑定属性-->
<p  v-bind:data="item.Number>0?‘开启‘：‘关闭‘">1111</p>

<!--绑定样式-->
<p v-bind:style="{‘color‘:(item.Num>0?‘#000‘:‘#1111‘)}">内容</p>

1 <!--花括号-->
2 <p>{{item.Num>0?‘开启‘:‘‘关闭}}</p>