Tengo una cadena que viene a la interfaz como esta comeoutside
Pero en html necesito renderizar esto con una condición
const separateFirstFourWords = (words) => { let newStr = `${words.substring(0, 4)} <br> ${words.substring(4,words.length)}`; return newStr; }; <p>{{something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')}}</p>Como puede ver, quiero separar las dos palabras y quiero un salto de línea entre estas palabras, ¿cómo puedo lograr eso en VUE?
Podría usar la directiva v-html para eso:
<p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p>
Esto representará el resultado del operador ternario como HTML.
Sin embargo, tenga en cuenta las vulnerabilidades de secuencias de comandos entre sitios que esto podría crear; consulte la advertencia en la documentación de v-html .
Puedes usar v-html :
const { ref } = Vue const app = Vue.createApp({ setup() { const separateFirstFourWords = (words) => { let newStr = `${words.substring(0, 4)} <br> ${words.substring(4, words.length)}`; return newStr; }; const something = ref(true) return { separateFirstFourWords, something } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <p v-html="something === true ? 'comeoutside' : separateFirstFourWords('comeoutside')"></p> <button @click="something = !something">change something</button> </div>¿Por qué no usar v-if ? De esa manera, su aplicación estará a salvo de las inyecciones de HTML/JS.
const { ref } = Vue const app = Vue.createApp({ setup() { const words = 'comeoutside' const something = ref(false) return { words, something } } }) app.mount('#app') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="app"> <div v-if="something"><p>{{words}}</p></div> <div v-else> <p>{{words.substring(0, 4)}} <br/> {{words.substring(4, words.length)}}</p> </div> </div>