vue 数据绑定、数据渲染、事件——0801

最新推荐文章于 2024-08-23 14:24:38 发布

daisy0328

最新推荐文章于 2024-08-23 14:24:38 发布

阅读量488

点赞数

分类专栏： web前端文章标签： vue.js

本文链接：https://blog.csdn.net/daisy0328/article/details/107831588

版权

本文详细介绍了Vue.js中的数据绑定，包括文本插值、属性绑定、class和样式绑定，以及v-model实现数据双向绑定。同时，文章还涵盖了列表渲染v-for、条件渲染v-if/v-show的区别和用法，以及事件绑定和事件修饰符的应用。最后讲解了如何通过ref属性获取虚拟DOM元素节点。

摘要由CSDN通过智能技术生成

关于 template 模板：

<template>
  <div id="app">
    
  </div>
</template>

<script>
export default {
   
  name: "app",
  data() {
   
    return {
   

    };
  },
};
</script>

<style lang="less">

</style>

template 模板只能有一个子结构。
template 模板里边的 div 的 id 尽量和 export default 里边的name 属性一致

标签中绑定的所有数据均在data() 里边定义。

如：

<script>
export default {
   
  name: "app",
  data() {
   
    return {
   
      msg: "我是单向数据绑定",
      text: "我是text",
      html: "我是html",
      title: "我是标题",
      classname: "div",
      ist: true,
      isf: false,
      style: {
   
        width: "20px",
        height: "20px",
        border: "1px solid #000",
      },
      w: "40px",
      h: "40px",
      b: "1px solid #000",
      obj: {
   
        name: "张三",
      },
      stu: [
        {
    name: "张三", sex: "男" },
        {
    name: "张三", sex: "男" },
        {
    name: "张三", sex: "男" },
        {
    name: "张三", sex: "男" },
      ],
      stus: [
        {
    name: "张三", sex: "男", hobby: ["篮球", "足球"] },
        {
    name: "张三&