<template> <div id="app"> <!-- 绑定属性 --> <div v-bind:title="title">你好,世界</div> <!-- 绑定class --> <div :class="{‘red‘:flag,‘blue‘:!flag}">你好,世界</div> <!-- 绑定style --> <div class="box" :style="{width:boxwidth+‘px‘}"></div> <!-- 绑定HTML --> <div v-html="h"></div> <!-- 绑定数据2 --> <div v-text="msg"></div> <!-- 循环数据,第一个高亮 --> <ul> <li v-for="(item,key) in list" :class="{‘blue‘:key%2==0,‘red‘:key%2!=0}"> {{key}}---{{item}} </li> </ul> </div> </template> <script> export default { data () { /*业务逻辑里面定义的数据*/ return { title:‘你好,世界‘, h:‘<h2>h2</h2>‘, msg:‘你好vue‘, list:[1,2,3], flag:true, boxwidth:300 } } } </script> <style> .red{color:red} .blue{color:blue} .box{ height:100px; width:100px; background:red } </style>
原文地址:https://www.cnblogs.com/zsczsc/p/9553032.html
时间: 2024-10-28 19:44:23