Vue基础（二）

最新推荐文章于 2022-04-06 15:39:56 发布

PromiseXuu

最新推荐文章于 2022-04-06 15:39:56 发布

阅读量232

点赞数

分类专栏： Vue 文章标签： Vue

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

本文链接：https://blog.csdn.net/XZZ2222/article/details/81090407

版权

Vue 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

1、class绑定和style绑定

html代码准备：

<div id="app">
  <h1>class绑定</h1>
  <p :class="a">爸爸是class绑定：字符串绑定</p>
  <p :class="{classB:isB,classC:isC}">爸爸是class绑定：对象绑定</p>


  <h1>style绑定</h1>
  <p :style="{color: ChangeColor,fontSize}">爸爸是style绑定</p>


  <button @click="update">更新</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>

class绑定

class='xxx'

1、xxx可以是字符串，可以是数组，可以是对象
2、字符串和对象常用，数组不常用

style绑定

style绑定

:style="对象{属性名：变量名，属性名：变量名}"，例如：
:style="{color: ChangeColor,fontSize}"

代码实现

    <script type="text/javascript">
      /*class='xxx'
      1、xxx可以是字符串，可以是数组，可以是对象
      2、字符串和对象常用，数组不常用
      */
      /*style绑定
       :style="对象{属性名：变量名，属性名：变量名}"，例如：
       :style="{color: ChangeColor,fontSize}"
      * */
    let vm = new Vue({
      el:'#app',
      data:{
    //     class绑定：字符串，注意此时a是一个变量
        a:'classA',

      /*class绑定：对象绑定
       :class="对象{class名：布尔变化值，class名：布尔变化值，}"
       :class="{classB:isB,classC:isC}"
       注意：true是这个属性保留，false是不保留，就是有或者没有
      * */
        isB:true,
        isC:false,
    //    style绑定
        ChangeColor:'red',
        fontSize:"20px"
      },
      methods:{
    //    定义update方法
        update(){
        this.a='classB';
        this.ChangeColor='black';
        this.fontSize = "40px"
    //    class绑定：对象绑定，设置相应的变化值
          this.isB = false
          this.isC = true
        }
      }

    })
    </script>

2、条件渲染

v-if/v-else和 v-show的区别：

1、使用v-if/v-else的元素，在页面中渲染的时候只出现一个。它的渲染方式相当于在true时候添加这个元素，false时将这个元素从代码块中删除。
2、v-show在页面中显示的时候元素全部出现，只不过是通过控制元素属性的display：none和display:block来判断元素在在浏览器界面中是否显示的

代码演示

<body>
<div id="app">
  <p v-if="ok">成功</p>
  <p v-else>失败</p>

  <p v-show="ok">ok</p>
  <p v-show="!ok">bu ok</p>
  <button @click="ok=!ok">切换</button>
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">

  /*  v-if/v-else和 v-show的区别：
  1、使用v-if/v-else的元素，在页面中渲染的时候只出现一个。
  它的渲染方式相当于在true时候添加这个元素，false时将这个元素从代码块中删除。
  2、v-show在页面中显示的时候元素全部出现，
  只不过是通过控制元素属性的display：none和display:block来判断元素在在浏览器界面中是否显示的
  * */
let vm = new Vue({
  el:'#app',
  data:{
   ok:true
  }
})
</script>
</body>

3、列表渲染

html代码准备：

<div id="app">
  <h1>v-for遍历数组</h1>
  <ul>
     <!--v-for="参数(定义的数组，下标) in 数组名字"-->
    <!--v-for使用的时候最好配合key-->
    <li v-for="(p,index) in persons" :key="index">
    {{index}}---{{p.name}}---{{p.age}}
      ---<button @click="deleteP(index)">删除</button>---
      ---<button @click="update(index,{name:'BigCat',age:5})">更新</button>
    </li>
  </ul>


  <h1>v-for遍历对象</h1>
  <ul>
    <!--v-for="(属性值,属性名) in 对象名"-->
    <li v-for="(value,key) in persons[0]">
      {{key}}---{{value}}
    </li>
  </ul>
</div>

v-for

遍历数组：v-for="参数(定义的数组，下标) in 数组名字
- v-for="(p,index) in persons"
遍历对象：v-for="(属性值,属性名) in 对象名
- v-for="(value,key) in persons[0]

JS代码演示

<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
let vm = new Vue({
  el:'#app',
  data:{
    persons:[
      {name:'cat',age:1},
      {name:'dog',age:2},
      {name:'big',age:3},
      {name:'cow',age:4}
    ]
  },
  methods:{
//    定义删除方法，注意不能使用关键字delete
//    注意vue中数组中的方法是经过处理的，所以跟原始的方法不一样
    deleteP (index){
//      删除：数组splice(删除项目的位置，删除的数量)
      this.persons.splice(index,1);
    },

//    定义更新数据的方法，
// 在上面的html代码中我们更新后的数据使用的是一个定值，
// 你也可以设置成一个变量的值，或者对象
    update(index,newA){
//     替换： 数组splice(删除项目的位置，替换的数量,替换的值)
      this.persons.splice(index,1,newA);
    }
  }
})
</script>

PromiseXuu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue基础（二）

1、class绑定和style绑定html代码准备：&lt;div id="app"&gt; &lt;h1&gt;class绑定&lt;/h1&gt; &lt;p :class="a"&gt;爸爸是class绑定：字符串绑定&lt;/p&gt; &lt;p :class="{classB:isB,classC:isC}"&gt;爸爸
复制链接

扫一扫