Vue模板语法

最新推荐文章于 2023-03-06 15:24:24 发布

秃头学姐爱喝奶茶

最新推荐文章于 2023-03-06 15:24:24 发布

阅读量183

点赞数 1

本文链接：https://blog.csdn.net/weixin_41989717/article/details/108629579

版权

1.插值

1.1文本

        <span>Message: {{ msg }}</span>

<div id="app">
      {{msg}}
 </div>
 <script>
 	new Vue({
 	 // 绑定div
          el: "#app",
          data: {
            msg: "hello",
          },
 	})

1.2原始html

        <span v-html="rawHtml"></span>

<div id="app">
      <!-- 将HTML代码片段当做当前div的内容 -->
      <div v-html="htmlStr"></div>
 </div>
 <script>
 	new Vue({
 	 // 绑定div
          el: "#app",
          data: {
            htmlStr: "<sapn>132</span>",
          },
 	})
 </script>

1.3属性

        <div v-bind:id="dynamicId"></div>

<div id="app">
    <div v-bind:title="msg">属性绑定</div>
 </div>
 <script>
 	new Vue({
 	 // 绑定div
          el: "#app",
          data: {
           msg: "hello",
          },
 	})
 </script>

1.4 事件

        <a v-on:click="doSomething">...</a>

<div id="app">
  <div v-on:click="test">弹框</div>
 </div>
 <script>
 	new Vue({
 	 // 绑定div
          el: "#app",
          data: {
           msg: "hello",
          },
           methods: {
          test() {
            alert(1);
          },
        },
 	})
 </script>

1.5Javascript表达式

        <div>{{ number + 1 }}</div>

2.条件渲染

2.1v-if

        当exp返回true的时候h1的内容会被渲染，否则渲染v-else指令中的内容，v-if可以单独使用
        <h1 v-if="exp">Vue is awesome!</h1>
        <h1 v-else>Oh no</h1>
        ```

<div id="app">
      <!--isLogin为true的时候执行v-if里的内容  -->
      <div v-if="isLogin">欢迎你！</div>
      <!--isLogin为false的时候执行v-for的内容  -->
      <div v-else>请登录</div>
 </div>
 <script>
 let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello!",
          isLogin: false,
        },
        methods: {},
      });
 </script>

2.2 v-show

        v-show 只是简单地切换元素的CSS property display。如果需要非常频繁地切换，使用v-show比较好
        ok为true显示，为false不显示（当为false的时候后台审查元素的时候h1的样式display: none;）
        <h1 v-show="ok">Hello!</h1>

 <div id="app">
	  <!-- isLogin为true显示，为false不显示 -->
	 <!--  当为false的时候后台审查元素的时候h1的样式display: none;-->
      <div v-show="isLogin">测试是否显示</div>
 </div>
 <script>
 let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello!",
          isLogin: false,
        },
        methods: {},
      });
 </script>

    ！！当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级

2.3列表渲染 v-for

    用于将列表数据进行渲染。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源
    数据数组，而 item 则是被迭代的数组元素的别名。
    //key具有唯一值
    <ul>
        <li v-for="item in items" :key="item.message"> {{ item.message }} </li>
    </ul>

    当items为数组的时候，item为数组元素
        <ul>
            <li v-for=“(item,index) in items" :key="item.message"> {{ item.message }} </li>
        </ul>
        index表示索引

    当obj为对象的时候，value为属性值，key为属性名,index为索引
        <ul>
            <li v-for= "(value,key,index) in obj" :key="value"> {{ value}} </li>
        </ul>

 <body>
    <div id="app">
      {{msg}}
      <ul>
        <!-- :key="index"唯一区分每次遍历 -->
        <li v-for="item in fruits" :title="msg">{{item}}</li>
        <li v-for="(item,index) in fruits" :key="index">
          {{index+1}}{{index+1+''+item}}
        </li>
      </ul>
      <table>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
        </tr>
        <tr v-for="item in stus" :key="item.id">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.age}}</td>
        </tr>
      </table>
    </div>
    <script>
      // 基本渲染{{}}v-for  条件渲染v-if v-else v-show 列表渲染（循环渲染）v-for
      //   v-for指令
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello!",
          fruits: ["apple", "orange", "purple"],
          stus: [
            { id: 1001, name: "zhangsan", age: 12 },
            { id: 1002, name: "lisi", age: 13 },
            { id: 1003, name: "wangwu", age: 14 },
          ],
        },
        methods: {},
      });
    </script>
  </body>

3.class绑定

    操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因 此，在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

<style>
      .pink {
        color: pink;
      }
      .size {
        font-size: 30px;
      }
  </style>
  </head>
  <body>
    <div id="app">
      <!-- size:true代表有该类 -->
      <div class="pink" :class="{size:true}">Hello</div>
      <div :class="{pink:false,size:true}">World</div>
      <div
        :class="[{pink:true},{
          size:false
      }]"
      >
        Hello World
      </div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          currentColor: "skyblue",
          msg: "hello",
          htmlStr: "<sapn>132</span>",
        },
        methods: {
          test() {
            alert(1);
          },
        },
      });
    </script>
  </body>

4.属性绑定

    v-bind 指令可以用于响应式地更新 HTML attribute，v-bind指令名称之后以冒号表示要接受的参数

5.style绑定

    v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS

property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名.

 <body>
    <div id="app">
      <!-- 测试样式 -->
      <!-- :后要求是对象或者数组 -->
      <div :style="styleObj">Hello</div>
      <div style="color: plum">world</div>
      <div :style="{color:currentColor}">!!</div>
      <!-- 若两者样式冲突，后面覆盖前面 -->
      <div :style="[styleObj,styleObj2]">hello world!</div>
    </div>
    <script>
      new Vue({
        el: "#app",
        data: {
          currentColor: "skyblue",
          msg: "hello",
          htmlStr: "<sapn>132</span>",
          styleObj: {
            color: "pink",
            "font-size": "30px",
          },
          styleObj2: {
            "background-color": "yellow",
          },
        },
        methods: {
          test() {
            alert(1);
          },
        },
      });
    </script>
  </body>

秃头学姐爱喝奶茶

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue模板语法

1.插值1.1文本 <span>Message: {{ msg }}</span><div id="app"> {{msg}} </div> <script> new Vue({ // 绑定div el: "#app", data: { msg: "hello", }, }) 1.2原始html
复制链接

扫一扫