第2节：vue3 模版语法

 1 <template>
 2 <h1>1、模版语法</h1>
 3 <h3>(1)、文本插值</h3>
 4  <p>{{ msg }}</p>
 5  <p>文本：{{ hello }}</p>
 6  <p>加法：{{ num+1 }}</p>
 7  <p>三目运算符：{{ ok?'Yes':'No'}}</p>
 8  <p>文本翻转（字符串转为数组，翻转，合并成字符串）：{{ message.split('').reverse().join('')}}</p>
 9  
10 </template>
11 
12 <script>
13 export default{
14   data(){
15     return{
16       msg:"神器的语法",
17       hello:"Hello World!",
18       num:10,
19       ok:true,
20       message:"大家好！"
21     }
22   }
23 }
24 </script>

 1 <template>
 2 <h1>1、模版语法</h1>
 3 <h3>(3)、属性绑定</h3>
 4 <div v-bind:id="dynamicId" v-bind:class="dynamicClass" v-bind:title="dynamicTitle" v-bind:about="dynamicAbout">测试</div>
 5 <p v-html="rawHtml"></p>
 6 </template>
 7 
 8 <script>
 9 export default{
10   data(){
11     return{
12       dynamicId:"appid",
13       dynamicClass:"appclass",
14       dynamicTitle:"测试",
15       dynamicAbout:null  //绑定的值是 null 或者 undefined，那么该属性将会从渲染的元素上移除
16     }
17   }
18 }
19 </script>
20 <style>
21 .appclass{
22   color:red;
23   font-size: 30px;
24 }
25 </style>

 1 <template>
 2 <h1>1、模版语法</h1>
 3 <h3>(4)、布尔型属性</h3>
 4 <button disabled>button1</button><br>
 5 <button :disabled="isButtonDisabled">button2</button><br>
 6 <button :disabled="isButtonDisabled3">button3</button>
 7 </template>
 8 
 9 <script>
10 export default{
11   data(){
12     return{
13       isButtonDisabled:true,
14       isButtonDisabled3:false
15     }
16   }
17 }
18 </script>

 1 <template>
 2 <h1>1、模版语法</h1>
 3 <h3>(5)、动态绑定多个值</h3>
 4 <div v-bind="objectOfAttrs">测试</div>
 5 </template>
 6 
 7 <script>
 8 export default{
 9   data(){
10     return{
11       objectOfAttrs:{
12         id:"appid",
13         class:"appclass"
14       }
15     }
16   }
17 }
18 </script>
19 <style>
20 .appclass{
21   color:red;
22   font-size: 30px;
23 }
24 </style>