【vue】v-bind动态属性绑定

v-bind
- 简写:value

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.textColor {color: blue;}</style>
</head><body><div id="app"><h2>value="tao355667.com"</h2><input type="text" value="www.tao355667.com" /><h2>value="tao355667.com"</h2><!-- 在value前面加v-bind，后面的值不能是定值 --><input type="text" v-bind:value="web.url" /><h2>value="tao355667.com"</h2><!-- v-bind，简写 --><input type="text" :value="web.url" /><h2>src="windows.jpg"</h2><img v-bind:src="web.img" style="width: 200px;"><h2>:class="{textColor.web.fontStatus}"</h2><!-- 根据fontStatus的值确定是否要渲染css --><b :class="{textColor:web.fontStatus}">tao355667</b><button @click="toggle">渲染/取消渲染</button></div><script type="module">import { createApp, reactive } from './vue.esm-browser.js'createApp({setup() {const web = reactive({url: "www.tao355667.com",img: "windows.jpg",fontStatus: false})const toggle = () => {web.fontStatus = !web.fontStatus;}return {web,toggle}}}).mount("#app")</script>
</body></html>