【vue.js基础】vue数据绑定

最新推荐文章于 2024-01-05 08:08:15 发布

Pang Pang Zhu

最新推荐文章于 2024-01-05 08:08:15 发布

阅读量466

点赞数

分类专栏：项目学习 Vue 文章标签： vue html web javascript

本文链接：https://blog.csdn.net/weixin_44813929/article/details/109364938

版权

项目学习同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

Vue

3 篇文章 0 订阅

订阅专栏

vue数据绑定

数值绑定

import Vue from 'vue'

// vat globalVar='111' 
// 可以访问到的是在new Vue({})里的值，也就是this 还有一个是vue自建的白名单 默认的全局变量都可以访问 自己命名在外部的变量是无法访问的

new Vue({
  el: '#root',
  template: `
    <div>
      <p>{{isActive}}</p>
	  <p v-html=""html"></p>
    </div>
  `,
  data: {
    isActive: false,
    arr: [1, 2, 3],
    html:'<span>123</span>',
     //直接{{html}}显示，则整个html显示在页面上<span></span> 默认字符串 因为这样可以防止注入，攻击
  },
})

1.绑定数值
可以做简单的操作，例如arr.jojin(','),Date.now()
2.绑定html
默认是字符串，如需以html显示，则需要v-htlml

class和style绑定

new Vue({
  el: '#root',
  template: `
    <div :class="{active:!isActive}" :style="[styles,styles2]">
    </div>
  `,
  data: {
    isActive: false,
    arr: [1, 2, 3],
    styles: {
      color: 'black'
    },
    styles2: {
      color:'red'
    }
  },
  computed: {
    className() {
    }
  }
})

1.class绑定的集中方法
<div :class="{active:!isActive}"></div>
<div :class="[isActive?'active':'normal']></div>

<div :class="{className" :style="[styles,styles2]">
    computed:{
        className(){
            return active
        }
    }

事件绑定

new Vue({
    el: '#root',
    template: `
    <div @click="handkeClick">
    	<p>{{getJoinArr(arr)}}</p>
    </div>
	`,
    data: {
        isActive: false,
        arr: [1, 2, 3],
    },
    methods: {
        handleClick() {
            alert('click ')
        },
        getJoinArr(arr) {
            return arr.join(' ')
        }
    },
    computed: {
        className() {

        }
    }
})

事件绑定
数据绑定 
可以用methods方法