关于vue.js:P3vue3-模版语法

Attribute

Mustache 语法不能作用在 HTML attribute 上，遇到这种状况应该应用 v-bind 指令：

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

对于布尔 attribute (它们只有存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被蕴含在渲染进去的 <button> 元素中。

JavaScript 表达式

迄今为止，在咱们的模板中，咱们始终都只绑定简略的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了齐全的 JavaScript 表达式反对。

{{ number + 1 }}{{ ok ? 'YES' : 'NO' }}{{ message.split('').reverse().join('') }}<div v-bind:id="'list-' + id"></div>这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限度就是，每个绑定都只能蕴含单个表达式，所以上面的例子都不会失效。<!-- 这是语句，不是表达式 -->{{ var a = 1 }}<!-- 流控制也不会失效，请应用三元表达式 -->{{ if (ok) { return message } }}

v-bind实例

<template>  <div>    <p>{{test57}}</p>    <p>{{test58}}</p>    <p v-once>{{test57}}</p>    <button @click="changeUname">changename</button>    <p>{{msg}}</p>    <p v-html="msg"> </p>    <p v-bind:id="id">v-bind绑定</p>    <img v-bind:src="url">  </div></template><script>  export default{    data(){      return{        test57: '57-6666',        test58: '58-jjjj',        msg:"<h2>题目56</h2>>",        id: "d1",        url: "https://www.xiaohongshu.com/favicon.ico"      }    },    methods:{      changeUname: function (){        this.test57='66666666666666'      },    },  };</script><style>  #d1{    color: red;  }</style>

<template>  <div>    <p>{{test57}}</p>    <p>{{test58}}</p>    <p v-once>{{test57}}</p>    <button @click="changeUname">changename</button>    <p>{{msg}}</p>    <p v-html="msg"> </p>    <p v-bind:id="id">v-bind绑定</p>    <img v-bind:src="url" alt="">    <button @click="changeColor">changeColor</button>  </div></template><script>  export default{    data(){      return{        test57: '57-6666',        test58: '58-jjjj',        msg:"<h2>题目56</h2>>",        id: "d1",        url: "https://www.xiaohongshu.com/favicon.ico"      }    },    methods:{      changeUname: function (){        this.test57='66666666666666'      },      changeColor: function (){        this.id="d2"      }    },  };</script><style>  #d1{    color: red;  }  #d2{    color: blue;  }</style>